Angular 15.1 mat-tab-nav-bar 需要 TabPanel

Question

我最近将项目升级到 Angular 15.1 并注意到一个新问题。

在页面上，我有一个 mat-tab-nav，它通过路由打开子页面：

<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>

更新后一切正常，但在控制台中我看到错误“必须通过 [tabPanel] 指定 mat-tab-nav-panel。 ”

查看 Angular 代码（第 385 行）https://github.com/angular/components/blob/main/src/material/tabs/tab-nav-bar/tab-nav-bar.ts 我看到代码：

override ngAfterViewInit() {
 if (!this.tabPanel && (typeof ngDevMode === 'undefined' || ngDevMode)) {
   throw new Error('A mat-tab-nav-panel must be specified via [tabPanel].');
 }
 super.ngAfterViewInit();
}

从文档（https://material.angular.io/components/tabs/api tabPanel）来看，tabPanel可能为空：

tabPanel：由导航栏控制的关联选项卡面板。如果未提供，则导航栏将遵循 ARIA 链接/导航地标模式。如果提供，它遵循 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>

这是正确的方法吗？在我看来，这是 Angular 组件的一个错误。你怎么认为？

Answer 1

在我看来，你必须将路由器插座包装在<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>
  <router-outlet></router-outlet>
</mat-tab-nav-panel>

文档指出
“相应的<router-outlet>必须包装在<mat-tab-nav-panel>组件中，并且通常应放置在距离 mat-tab-nav-bar 相对较近的位置（请参阅辅助功能）。”
请参阅Angular Material 选项卡：选项卡和导航
尽管 Angular 团队的代码示例目前缺少 Router-Outlet。

Answer 2

在较新的版本中（我需要它用于 Angular 16），您必须确保添加[tabPanel]="tabPanel"到<nav mat-tab-nav-bar></nav>包含选项卡链接：

<nav mat-tab-nav-bar>
    <a
        mat-tab-link
        [routerLink]="['/some/link']"
        [active]="isActiveTab('active_tab_name')"
        (selectedTabChange)="tabChanged('active_tab_name')"
    >
        My Tab Title
    </a>
</nav>

<mat-tab-nav-panel #tabPanel>
    <router-outlet></router-outlet>
</mat-tab-nav-panel>

到

<nav
    mat-tab-nav-bar
    [tabPanel]="tabPanel" // <---- add this one here
>
    <a
        mat-tab-link
        [routerLink]="['/some/link']"
        [active]="isActiveTab('active_tab_name')"
        (selectedTabChange)="tabChanged('active_tab_name')"
    >
        My Tab Title
    </a>
</nav>
<mat-tab-nav-panel #tabPanel>
    <router-outlet></router-outlet>
</mat-tab-nav-panel>