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

我正在使用ng2-bootstrap中的选项卡，该选项卡放置在我的AppComponent中。我试图从Child组件中的一个按钮切换AppComponent中的活动选项卡。我看到，单击按钮并且正在修改tabs数组时，setTab方法正在执行。但标签不会切换。任何帮助是极大的赞赏。Angular Bootstrap选项卡 - 无法从子组件控制

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

来源

2017-04-22 gunnersfan

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

来源

2017-06-20 19:01:01 beckpol

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

回答

相关问题