У меня есть панель навигации mat-tab-nav-bar для моего сайта, но синяя подчеркивающая строка mat-tab-link не будет преследовать активную кнопку. Он просто остается на первой кнопке и не двигается. Кнопки переходят в активное состояние, хотя в том смысле, что цвет фона меняется, и они хорошо перенаправляются на соответствующие страницы.
Вот это 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' },
];
}
А вот и 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>
Вот это 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 { }
Что мне не хватает? Спасибо!
EDIT
Я отредактировал 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}}
<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>
Как оказалось, первая ссылка в меню всегда остается активной (rla.isActive) - также при переходе на другие страницы. Все остальные ссылки просто отключают свое активное состояние и активируются только при переходе на них. Как отключить активное состояние первой ссылки при переходе к другим ссылкам?
РЕДАКТИРОВАТЬ 2
Добавление app-routing.module.ts код:
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 { }