☰

Angular 15.1 mat-tab-nav-bar には TabPanel が必要です 質問する

tag-icon • tag-icon angular angular-material
Angular 15.1 mat-tab-nav-bar には TabPanel が必要です 質問する

最近、プロジェクトを 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>

アップデート後はすべて正常に動作しますが、コンソールにエラーが表示されます。mat-tab-nav-panel は [tabPanel] で指定する必要があります。「

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/apitabPanel) の場合、tabPanel が null になる可能性があるようです。

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 コンポーネントのバグのように思えます。どう思いますか?

ベストアンサー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 がありません。

おすすめ記事