2

MatTabNav Docsは、 のアクティブなリンクを更新するために使用できるメソッドを示していますmat-tab-nav。これを実装する方法の例は存在しないようであり、ソースコードは実装方法についてより良い洞察を提供しません.

これが私のテンプレートのhtmlです:

<nav mat-tab-nav-bar #tabs>
  <a mat-tab-link *ngFor="let link of links"
    (click)="activelink = link.identifier"
    [active]="activelink === link.identifier"
    [routerLink]="[ './', link.identifier ]"
  >{{ link.title }}</a>
</nav>

次の 2 つの例を使用してメソッドにアクセスしようとしましたが、どちらも のupdateActiveLinkメソッドにアクセスできないようですthis.tabs

試行の失敗 1

@ViewChild( 'tabs' ) tabs: MatTabNav;

そして失敗した試み2

@ViewChild( 'MatTabNav' ) tabs: MatTabNav;

紛らわしいのは、要素への参照をアイテムに渡す必要があることを示しているため、カストラクタthis.something.updateActiveLink( this.tabs )にインポートしてそのようにアクセスしようとしたことですMatTabNav_matTabNav.updateActiveLink( this.tabs )

constructor(
  private _matTabNav: MatTabNav,
) { }

私の最終目標

ルートに私のタブが含まれていない場合は、最初のリンクを強調表示するつもりです。また、ルートが変更された場合は、タブに変更を反映させたいと思います。したがって、最初の行は同じものを選択することになります

/route/
/route/tab1
/route/tab2
/route/tab3

そして、両方が同じコンポーネントにルーティングされている私のルート

{ component: MyTabComponent,       path: 'route/'     },
{ component: MyTabComponent,       path: 'route/:tab' },
4

2 に答える 2