angular - 如何以编程方式从组件类中选择 Angular 引导导航选项卡

Question

您好，如何在我的组件类中获取对 ngbNav ng-bootstrap 组件的引用，以便我可以通过编程方式选择一些选项卡？这不起作用:

@ViewChild('nav') nav? : ElementRef<NgbNav>;

在我的 html 模板中我有:

<ul ngbNav #nav="ngbNav" [(activeId)]="active" (navChange)="onNavChange($event)" class="nav-tabs">

Answer 1

您的方法似乎对我有用——我只需要添加一个方法来选择选项卡；您可以调用 this.nav.select(index); 以编程方式选择您需要的选项卡(选项卡索引从 1 而不是 0 开始)。

我创建了一个演示 here - 单击选项卡下方的按钮以选择第三个选项卡。代码是:

HTML

<button (click)="selectTab()">Select Tab 3</button>

typescript

@ViewChild("nav") // Get a reference to the ngbNav
nav;

selectTab() {
    // Programatically select the third tab
    this.nav.select(3);
}