Я лениво загружаю функциональный модуль, как показано в Routing.module.ts, из app-routing.module.ts. Маршрут по умолчанию в рекомендуемом модуле маршрутизации загружает LccpTrackerComponent, который содержит 3 дочерних маршрута. Шаблон для LccpTrackerComponent использует компонент вкладки Angular Material. Я пытаюсь добавить директиву routerLink в заголовок mat-tab для маршрута к соответствующему дочернему компоненту, но маршрут не срабатывает. Кто-нибудь знает, как заставить это работать? Спасибо.

Шаблон

<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 {}
3
user266909 24 Окт 2018 в 03:51

2 ответа

Лучший ответ

Используйте <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>
0
PeS 24 Окт 2018 в 01:18

В моем случае можно использовать <a [routerLink]="['/LinkPath']">.

Но я также рекомендую вам использовать тег страницы в качестве маршрутизации, поскольку вы определили селектор,

Например путь: 'консультируется' -> используйте <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] (может отличаться от вашей материальной версии) для достижения той же цели.

0
David.chen 24 Окт 2018 в 01:39