Question

我正在使用ng2-bootstrap中的Tabs，我已将它放在AppComponent中。我试图从Child组件中的按钮切换AppComponent中的活动选项卡。我看到单击按钮并且正在修改tabs数组时正在执行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中没有任何代码。

我刚安装了“bootstrap”：“^ 3.3.7”，“ng2-bootstrap”：“^ 1.6.3”在cli安装的默认包之上。遵循https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/bootstrap4.md中的说明。此外，如果我从子组件移动按钮到AppComponent，我在控制选项卡时没有任何问题，并且它工作正常。

Answer 1

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

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

1 个答案: