如何以编程方式从组件类中选择角度引导导航选项卡

【问题标题】：How to programmatically select a angular bootstrap nav tab from a component class如何以编程方式从组件类中选择角度引导导航选项卡
【发布时间】：2021-02-17 14:43:57
【问题描述】：

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

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

在我的 html 模板中，我有：

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

【问题讨论】：

你有什么错误吗？

标签： angular navbar ng-bootstrap

【解决方案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);
}

【讨论】：