Angular 6 Material: mat-tab-link 被下划线选中

Question

我的网站有一个 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 以了解更多关于 link "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>

事实证明，菜单中的第一个 link 始终保持活动状态 (rla.isActive) - 当我导航到其他页面时也是如此。所有其他 links 都很好地关闭了它们的活动状态，并且只有在导航到它们时才会被激活。如何在导航到其他 link 时关闭第一个 link 的活动状态？

编辑 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 { }

Answer 1

您在 link 之前缺少 /:

<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' },
]

Answer 2

您可以简单地按照下面的代码。active 就是 bootstrap class。

<nav mat-tab-nav-bar>
  <a mat-tab-link
  *ngFor="let link of navLinks"
  [routerLink]="['/'+link.path]"
  routerLinkActive="active">
  {{link.label}}
  </a>
</nav>

或者你可以像下面这样而不是使用 material 设计。请注意 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>

Answer 3

您需要将 [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>

Answer 4

它对你不起作用，因为每个人都有相同的#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>

Answer 5

使用不同的局部变量（#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>

Answer 6

我想出了一个指令来实现与其他答案相同的效果而不会使模板混乱：

@Directive({selector: 'a[routerLinkActive][mat-tab-link]'})
class MatTabRouterLinkActiveDirective {
    constructor(routerLinkActive: RouterLinkActive, matTabLink: MatTabLink) {
        routerLinkActive.isActiveChange.subscribe(value => matTabLink.active = value);
    }
}

在您的模块中包含此指令后，您只需要 routerLinkActive 属性，其余的将由指令处理：

<a mat-tab-link routerLink="/foo" routerLinkActive>Foo</a>

这将摆脱#rlaXXX="routerLinkActive" [active]="rlaXXX.isActive"的样板，当直接在模板中列出选项卡时，它可以非常重复（而不是从*ngFor或类似的情况下生成）。[= 15 = = 15 = ]

Angular 6 Material: mat-tab-link 被下划线选中

Angular 6 Material: mat-tab-link be selected by underlining bar

navigationbar

typescript

angular-material

angular