更改角度组件内的活动引导选项卡答案

【问题标题】：Change active bootstrap tab inside angular component更改角度组件内的活动引导选项卡
【发布时间】：2018-06-29 15:55:29
【问题描述】：

嗨，我一直被这个看似简单的问题困扰了一段时间，通过 SO 解决方案来回似乎并不完全适合我的用例...... 我有一个角度组件，它有一个包含引导导航药丸的模板，这些只是在这个特定屏幕中用作选项卡。所以我有一个搜索选项卡和一个结果选项卡，在执行搜索后我想激活结果选项卡，但我不知道如何从组件连接到引导选项卡。

模板...

<div id="tabs" #tabs>

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#search" data-toggle="tab">Search</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#results" data-toggle="tab">Results</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="search">
      search screen 
      <button type="button" (click)="search()">Search</button>
    </div>
    <div class="tab-pane active" id="results">results screen</div>
  </div>

</div>

那么组件就像..

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {

  @ViewChild('tabs') tabs; 

  search() {
    //perform search. then select the results tab in template.
    //this.tabs.selectedIndex = ...
  }

}

这可能吗？还是我需要使用在组件中配置的不同风格的选项卡。非常感谢。

【问题讨论】：

标签： angular bootstrap-4

【解决方案1】：

使用activeTab 跟踪哪个选项卡处于活动状态，并使用ngClass 应用.active 类

component.html

<div id="tabs" #tabs>

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#search" [ngClass]="{ 'active':activeTab==='search'}" (click)="search('search')"
         data-toggle="tab">Search</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#results" [ngClass]="{ 'active':activeTab==='result'}" data-toggle="tab"
         (click)="result('result')">Results</a>
    </li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane" id="search" [ngClass]="{ 'active':activeTab==='search'}">
      search screen
      <button type="button" (click)="search('result')">Search</button>
    </div>
    <div class="tab-pane" id="results" [ngClass]="{ 'active':activeTab==='result'}">results screen</div>
  </div>

</div>

component.ts

  activeTab = 'search';

  search(activeTab){
    this.activeTab = activeTab;
  }

  result(activeTab){
    this.activeTab = activeTab;
  }

【讨论】：

我已经看到了关于这个主题的其他几个答案，我发现这个是最有效和“algular-native”的。它很简单，在我的应用中完美运行。
对我来说这不起作用...它没有从上一个选项卡中删除活动类...
非常好的解决方案，不需要 jquery！

【解决方案2】：

除了 dasfdsa 答案，要在 Angular 中使用路由，还需要包括：

<div id="tabs" #tabs>

        <ul class="nav nav-pills">
          <li class="nav-item">
            <a class="nav-link active" href="#search" [ngClass]="{ 'active':activeTab==='search'}" (click)="search('search', $event)"
               data-toggle="tab">Search</a>
          </li>
          <li class="nav-item">
            <a class="nav-link"  href="#results" [ngClass]="{ 'active':activeTab==='result'}" data-toggle="tab"
               (click)="result('result', $event)">Results</a>
          </li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane" id="search" [ngClass]="{ 'active':activeTab==='search'}">
            search screen
            <button type="button" (click)="search('result', $event)">Search</button>
          </div>
          <div class="tab-pane" id="results" [ngClass]="{ 'active':activeTab==='result'}">results screen</div>
        </div>

      </div>

search(activeTab: string, $event: MouseEvent): void{
    $event.preventDefault();
    this.activeTab = activeTab;
  }

  result(activeTab: string, $event: MouseEvent): void{
    $event.preventDefault();
    this.activeTab = activeTab;
  }

【讨论】：