[英]how to enable routerLink in mat-tab
我懶於從app-routing.module.ts加載功能模塊,如Routing.module.ts所示。 特色路由模塊中的默認路由會加載包含3個子路由的LccpTrackerComponent。 LccpTrackerComponent的模板使用Angular Material選項卡組件。 我正在嘗試在mat-tab標題中添加routerLink指令以路由到相應的子組件,但是該路由不會觸發。 有誰知道如何使這項工作? 謝謝。
模板
<article> <section> <mat-tab-group> <mat-tab label="Consults"><a routerLink="consults" /></mat-tab> <mat-tab label="Screening"><a routerLink="screening" /></mat-tab> <mat-tab label="Noduled"><a routerLink="noduled" /></mat-tab> </mat-tab-group> </section> <router-outlet></router-outlet> </article>
Routing.module.ts
const routes: Routes = [{ path: '', component: LccpTrackerComponent, children: [{ path: 'consults', component: ConsultComponent, pathMatch: 'full', resolve: { consultSummary: LccpResolver } }, { path: 'screening', component: ScreeningComponent, pathMatch: 'full', resolve: { enrolledSummary: ScreeningResolver } }, { path: 'noduled', component: NoduledComponent, pathMatch: 'full', resolve: { noduledSummary: NoduledResolver } } ] }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class LccpRoutingModule {}
就我而言,使用<a [routerLink]="['/LinkPath']">
很好。
但我也建議您使用頁面標簽作為路由,因為您已經定義了選擇器,
像路徑:'consults'->使用<consults></consults>
例如 :
<mat-tab-group>
<mat-tab label="Consults"><consults</consults>></mat-tab>
<mat-tab label="Screening"><screening></screening></mat-tab>
<mat-tab label="Noduled"><noduled></noduled></mat-tab>
</mat-tab-group>
此外,如果您擔心加載,可以使用[selectIndex]
方法(可能與您的材料版本不同)來實現相同的目的。
從文檔中使用<nav mat-tab-nav-bar>
:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.