Winkel-6 Material: mat-tab-link ausgewählt werden durch unterstreichen bar

Ich habe eine mat-tab-nav-bar Navigationsleiste für meine Homepage, aber die mat-tab-link blau Unterstrichen bar nicht jagen Sie den active button. Bleibt er einfach auf den ersten button, und bewegt sich nicht. Die Tasten sind wiederum in aktive Zustand ist zwar in dem Sinne, dass die Hintergrundfarbe geändert, und leiten Sie auf die entsprechenden Seiten.

Hier ist die 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' },
  ];
}

Und hier ist die 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>

Hier ist die 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 { }

Was bin ich? Danke!

BEARBEITEN

Bearbeitete ich die app.component.html wie dieser, um herauszufinden, einige weitere über den link "aktiven" Zustand:

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

Als sich herausstellt, ist der erste link im Menü immer aktiv bleibt (rla.isActive) - auch wenn ich die Navigation zu anderen Seiten. Alle anderen links schalten Sie Ihre aktiven Zustand einwandfrei, und nur aktiviert, wenn Sie dorthin navigieren. Wie schalte ich das den aktiven Zustand der erste link bei der Navigation zu anderen links?

EDIT 2

Hinzufügen 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 { }
  • Die route leer-Pfad wird immer vollständig für alle Pfade, daher routerLinkActive wird immer wahr sein.
  • Ja!! Das ist es, danke! Wie kann ich einen router, der Pfad zum root-obwohl, ohne es zu beheben für alle Wege? Die ersten "Home"-Taste ist in der Regel root! Ich habe versucht, mit /, aber ich bekomme eine Fehler-Konsole Error: Invalid configuration of route '/': path cannot start with a slash.
  • Vielleicht können Sie versuchen, ein Haus route und standardmäßig Ihre app umleiten zu Hause Weg?
  • Ich würde es wirklich bevorzugen, können Sie ein root-URL, da es schön aussieht, um eine saubere Stamm-URL für die Startseite. Ist dies nicht möglich? Dies ist eine erweiterte Rahmen, sollte möglich sein, IMO! Danke!
Schreibe einen Kommentar