我正在使用 ngbootstrap。默认情况下，第一个选项卡处于活动状态。但我希望第二个选项卡需要处于活动状态而不是第一个选项卡

Question

当将 ng-bootstrap 与 Angular 一起使用时，它工作正常。我不知道如何启用 TAB SECOND，因为页面加载时默认激活。谢谢。

<nav ngbNav #nav="ngbNav" class="nav-tabs">
    <ng-container ngbNavItem>
        <a ngbNavLink>One</a>
         <ng-template ngbNavContent>
          Om
       </ng-template>
    </ng-container>
    <ng-container ngbNavItem>
       <a ngbNavLink>Two</a>
        <ng-template ngbNavContent>
        Namaha
        </ng-template>
    </ng-container>
    <ng-container ngbNavItem>
       <a ngbNavLink>Three</a>
       <ng-template ngbNavContent>
        Shivaya
       </ng-template>
    </ng-container>
</nav>

Answer 1

使用[(activeId)]="active" 并为您的 navItem 分配值，如下所示[ngbNavItem]="1"

component.html

<nav ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs">
    <ng-container [ngbNavItem]="1">
        <a ngbNavLink>One</a>
        <ng-template ngbNavContent>
            Om
        </ng-template>
    </ng-container>
    <ng-container [ngbNavItem]="2">
        <a ngbNavLink>Two</a>
        <ng-template ngbNavContent>
            Namaha
        </ng-template>
    </ng-container>
    <ng-container [ngbNavItem]="3">
        <a ngbNavLink>Three</a>
        <ng-template ngbNavContent>
            Shivaya
        </ng-template>
    </ng-container>
</nav>

<div [ngbNavOutlet]="nav" class="mt-2"></div>

component.ts

activeId:any = 2;

这是工作stackblitz：https://stackblitz.com/edit/angular-lg1sot-gn4bek ?file=src/app/nav-basic.html