Angular Material mat-tab-nav-bar не применяется активным должным образом

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 }
    ]
  },

Я проверил, и ни один из них никогда не устанавливается как активный, поэтому я предполагаю, что именно в этом и заключается моя проблема.Это как-то связано с тем, что мои маршруты вложены?