1

我正在使用来自 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>

account.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，我在控制选项卡方面没有任何问题，并且工作正常。

4

1 回答 1

1

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

于 2017-06-20T19:01:01.887 回答