Angulaire 6 Matériel: mat-onglet-link être sélectionné en soulignant bar

J'ai un mat-tab-nav-bar barre de navigation de mon site, mais le mat-tab-link bleu soulignant bars ne pas chasser le bouton actif. Il reste simplement à le premier bouton, et ne bouge pas. Les boutons de la faire tourner dans l'état actif, bien que dans le sens que le changement de couleur de fond, et ils itinéraire bien pour les pages correspondantes.

Voici la app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  navLinks = [
    { path: '', label: 'The Problem' },
    { path: 'the-solution', label: 'The Solution' },
    { path: 'the-game', label: 'The Game' },
    { path: 'probability-calculator', label: 'Probability calculator' },
  ];
}

Et voici le app.component.html:

<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>

Ici est la app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatTabsModule } from '@angular/material/tabs';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { TheProblemComponent } from './the-problem/the-problem.component';
import { TheSolutionComponent } from './the-solution/the-solution.component';
import { ProbabilityCalculatorComponent } from './probability-calculator/probability-calculator.component';
import { TheGameComponent } from './the-game/the-game.component';

@NgModule({
  declarations: [
    AppComponent,
    TheProblemComponent,
    TheSolutionComponent,
    ProbabilityCalculatorComponent,
    TheGameComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    BrowserAnimationsModule,
    MatTabsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ce qui me manque? Merci!!!!

MODIFIER

J'ai édité le app.component.html comme ça pour savoir un peu plus sur le lien "active":

<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}}
    <div style="color: red; margin-left: 10px;">
        <span *ngIf="rla.isActive"> Is active!</span>
        <span *ngIf="!rla.isActive"> Is not active...</span>
    </div>
  </a>
</nav>

<router-outlet></router-outlet>

Comme il s'avère, le premier lien dans le menu reste toujours active (rla.isActive) - aussi quand je suis naviguer vers d'autres pages. Tous les autres liens éteindre leur état actif très bien, et uniquement activés lorsqu'ils sont à utiliser pour la navigation. Comment puis-je désactiver l'état actif de la première liaison lors de la navigation vers d'autres liens?

EDIT 2

Ajoutant app-routing.module.ts code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TheProblemComponent } from './the-problem/the-problem.component';
import { TheSolutionComponent } from './the-solution/the-solution.component';
import { TheGameComponent } from './the-game/the-game.component';
import { ProbabilityCalculatorComponent } from './probability-calculator/probability-calculator.component';

const routes: Routes = [
    { path: '', component: TheProblemComponent },
    { path: 'the-solution', component: TheSolutionComponent },
    { path: 'the-game', component: TheGameComponent },
    { path: 'probability-calculator', component: ProbabilityCalculatorComponent }
];


@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }