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-KonsoleError: 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!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ihnen fehlt ein
/
bevor der link:EDIT: Der richtige Weg hier einen nicht-leeren Pfad für alle Routen. Dann können Sie einen Platzhalter mit einer Weiterleitung.
RouterModule
? Hinzufügen Sie können mehr code zeigen Ihre app-Modul?app.module.ts
code. Danke!Es nicht für Sie arbeiten, weil jeder hat die gleiche #rla variable
Können Sie es auf diese Weise:
HTML:
oder mit {exact:true}
HTML:
*ngFor
zum Rendern der links. In einem solchen Fall die Benennung der lokalen#
variable unterschiedlich für jeden link hat den job.Können Sie Folgen Sie einfach den untenstehenden code.
active
ist einfach bootstrap-Klasse.ODER Sie können tun, wie dies unten anstelle von material design. bitte berücksichtigen
routerLinkActiveOptions
verwendet wird.Müssen Sie
[routerLinkActiveOptions]="{exact:true}"
zu dena
tag.Es wird
Mit unterschiedlichen lokalen Variablen(
#rla1
,#rla2
) arbeitete für mich, da ich mich nicht mit*ngFor
: