Angular Bootstrap 选项卡 - 无法从子组件控制答案

【问题标题】：Angular Bootstrap Tabs - Cannot control from child componentAngular Bootstrap 选项卡 - 无法从子组件控制
【发布时间】：2017-09-19 07:23:21
【问题描述】：

我正在使用来自 ng2-bootstrap 的选项卡，它已放入我的 AppComponent 中。我正在尝试从子组件中的按钮切换 AppComponent 中的活动选项卡。我看到当单击按钮并修改选项卡数组时正在执行 setTab 方法。但是标签不会切换。非常感谢任何帮助。

app.component.ts

export class AppComponent {
  public tabs: any[] = [
    {title: 'Accounts', content: '', active: true},
    {title: 'Names', content: '', active: false}
  ];

  setTab(index: number): void {
    this.tabs[index].active = true;
    if (index==1) {
      this.tabs[0].active = false;
    } else {
      this.tabs[1].active = false;
    }
  }

app.component.html

<tabset>
  <tab *ngFor="let tab of tabs; let i = index"
            [heading]="tab.title"
            [active]="tab.active"  
            (select)="setTab(i)">
    <div *ngIf="i==0">
      Accounts Content
      <app-accounts></app-accounts>
    </div>
    <div *ngIf="i==1">
      Names Content
    </div>
  </tab>
</tabset>

accounts.component.html

<div>
  <button (click)="setTab(1)">Click Tab2</button>
</div>

AccountsComponent 中没有任何代码。

我刚刚在 cli 安装的默认软件包之上安装了 "bootstrap": "^3.3.7", "ng2-bootstrap": "^1.6.3"。按照https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap4.md 中的说明进行操作。另外，如果我将按钮从子组件移到 AppComponent 中，我在控制选项卡时没有任何问题，并且可以正常工作。

【问题讨论】：

标签： twitter-bootstrap angular angular2-template ng2-bootstrap ngx-bootstrap

【解决方案1】：

我知道这是一篇旧帖子，但我通过在子组件上放置一个事件发射器和在父组件上放置一个监听器来解决这个问题。然后您可以根据需要通过发出选项卡索引来设置选项卡。

【讨论】：