如何让ngbNav传入无效activeId时默认选中第一个标签？

要让ngbNav和原ngb-tabset保持一致的行为——传入无效activeId时自动选中第一个标签，可通过以下方式实现：

核心思路 #

通过组件代码获取所有有效导航项的ID，校验当前传入的activeId是否合法，若不合法则自动替换为第一个导航项的ID。

修改后的组件代码（TS文件） #

import {Component, ViewChild, OnInit} from '@angular/core';
import {NgbNav} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-nav-basic',
  templateUrl: './nav-basic.html'
})
export class NgbdNavBasic implements OnInit { 
  activeIdString: any = "1";
  @ViewChild('nav') nav!: NgbNav;

  constructor(){
    this.activeIdString = "not_a_valid_id";
  }

  ngOnInit() {
    // 提取所有导航项的有效ID
    const validIds = this.nav.items.map(item => item.id);
    // 校验activeId有效性，无效则设置为第一个标签的ID
    if (!validIds.includes(this.activeIdString)) {
      this.activeIdString = validIds[0];
    }
  }
}

修改后的模板代码（HTML文件） #

<ngb-nav #nav [activeId]="activeIdString">
  <ngb-nav-item id="1">
    <ng-template ngbNavTitle>Simple</ng-template>
    <ng-template ngbNavContent>
      <p>Raw</p>
    </ng-template>
  </ngb-nav-item>
  <ngb-nav-item id="2">
    <ng-template ngbNavTitle><b>Fancy</b> title</ng-template>
    <ng-template ngbNavContent><p>Food</p></ng-template>
  </ngb-nav-item>
</ngb-nav>

补充说明 #

• 代码中通过@ViewChild('nav')获取ngbNav实例，从而拿到所有导航项的ID集合
• 校验逻辑放在ngOnInit钩子中，确保组件初始化阶段就完成无效ID的兜底处理
• 如果是动态加载导航项的场景，可监听nav.items的变化，在导航项更新时重新执行校验逻辑

内容的提问来源于stack exchange，提问作者Naveen kumar S