我的网站有一个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 { }
我错过了什么?谢谢!
修改
我编辑了这样的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 { }
答案 0 :(得分:6)
它对您不起作用,因为每个变量都具有相同的#rla变量
您可以这样做:
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[active]="link.isActive">
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
或带有{exact:true}
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[routerLinkActiveOptions]="{exact:true}"
[active]="rla.isActive">
{{link.label}}
</a>
</nav>
<router-outlet></router-outlet>
答案 1 :(得分:4)
您在链接前遗漏了/
:
<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>
编辑:这里正确的方法是为所有路线设置非空路径。然后,您可以使用带有重定向的通配符。
const APP_ROUTES: Route[] = [
{ path: 'path-1', component: OneComponent },
{ path: 'path-2', component: TwoComponent },
{ path: 'path-3', component: ThreeComponent },
{ path: '**', redirectTo: 'path-1' },
]
答案 2 :(得分:0)
您可以简单地按照以下代码。active
只是引导类。
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="['/'+link.path]"
routerLinkActive="active">
{{link.label}}
</a>
</nav>
或者你可以这样做,而不是使用材料设计。请注意
使用routerLinkActiveOptions
。
<ul class="nav nav-tabs">
<li role="presentation"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}">
<a routerLink="/">The Problem</a>
</li>
<li role="presentation"
routerLinkActive="active">
<a routerLink="/the-solution">The Solution</a>
</li>
<li role="presentation"
routerLinkActive="active">
<a [routerLink]="/the-game">The Game</a>
</li>
....
....
</ul>
答案 3 :(得分:0)
您需要将[routerLinkActiveOptions]="{exact:true}"
添加到a
标记中。
变成
<nav mat-tab-nav-bar>
<a mat-tab-link
*ngFor="let link of navLinks"
[routerLink]="link.path"
routerLinkActive #rla="routerLinkActive"
[routerLinkActiveOptions]="{exact:true}"
[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>
答案 4 :(得分:0)
使用不同的局部变量(#rla1
,#rla2
)对我有用,因为我没有使用*ngFor
:
<nav mat-tab-nav-bar>
<a mat-tab-link
[routerLink]="['/home/homepage/dashboard/']"
routerLinkActive #rla1="routerLinkActive"
[active]="rla1.isActive">Dashboard
</a>
<a mat-tab-link
[routerLink]="['/home/homepage/reports/']"
routerLinkActive #rla2="routerLinkActive"
[active]="rla2.isActive">Reports
</a>
</nav>