Angular 15.1中mat-tab-nav-bar需指定TabPanel的问题咨询

问题 #

将项目升级到Angular 15.1后遇到以下问题：页面中使用mat-tab-nav-bar通过路由打开子页面，原有代码如下：

<nav mat-tab-nav-bar color="primary">
  <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{link.label}}</a>
</nav>
<router-outlet></router-outlet>

升级后功能正常，但控制台抛出错误：

"A mat-tab-nav-panel must be specified via [tabPanel]."

查看Angular源码（tab-nav-bar.ts第385行）发现，开发模式下未指定tabPanel会触发该错误，但Material官方文档明确说明tabPanel可为null，未提供时会遵循ARIA链接/导航地标模式。

我通过添加一个无实际作用的mat-tab-nav-panel解决了问题，修改后代码如下：

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
  <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{link.label}}</a>
</nav>
<mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
<router-outlet></router-outlet>

请问：

1. 这种解决方式是否正确？
2. 这是否属于Angular组件的Bug？

回答 #

• 关于解决方式的正确性：
  这种方式可行但属于临时规避方案。你添加的空mat-tab-nav-panel只是为了绕过开发模式下的错误校验，本身没有参与路由导航的逻辑，不会影响原有功能的正常运行。但从设计角度来说，这是多余的DOM元素，并非官方推荐的用法。

• 关于是否属于Bug：
  这确实是Angular Material的文档与实现不一致的Bug。官方文档明确允许tabPanel设为null，未指定时采用ARIA链接模式，但源码在开发环境中强制要求必须指定tabPanel，这违背了文档描述的预期行为。

内容的提问来源于stack exchange，提问作者Gabriele Muscas