Question

我浏览了有关该主题的所有其他帖子，但无法弄清楚我的问题。除非我强行使用

之类的标签，否则我的标签永远不会带有有效的下划线

[active]="true"> || [active]="activeLinkIndex">

组件HTML

<mat-toolbar color="primary" *ngIf="showTabsBar">
<span>{{ branchName }}</span>
<span class="spacer"></span>
<nav mat-tab-nav-bar backgroundColor="primary">
    <a class="push-right" mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" [routerLinkActiveOptions]="{exact:true}" routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{link.label}}
    </a>
</nav>

Component.ts

    activeLinkIndex = -1;
navLinks: any[] = [{ link: 'dashboard', label: 'Dashboard', index: 0 },
{ link: 'planning', label: 'Planning Queue', index: 1 },
{ link: 'work-queues', label: 'Work Queues', index: 2 },
{ link: 'equipment', label: 'Equipment', index: 3 },
{ link: 'containers', label: 'Containers', index: 4 }, ];

Router.ts

    path: '',
component: GraphicsBranchComponent,
children: [
  { path: '', component: GraphicsBranchListComponent },
  {
    path: ':id',
    component: GraphicsBranchDetailsComponent,
    canActivate: [BranchDashboardGuard],
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'planning', component: PlanningComponent },
      { path: 'work-queues', component: WorkQueuesComponent },
      { path: 'equipment', component: EquipmentComponent },
      { path: 'containers', component: ContainersComponent },
      { path: 'containers/new', component: ContainersCreationComponent },
      { path: 'containers/edit/:id', component: ContainerEditDetailsComponent }
    ]
  },

我检查了一下，没有一个被设置为活动状态，所以我猜这就是我的问题所在。与我的路线嵌套有关吗？

角材料mat-tab-nav-bar应用不正确

0 个答案: