Angular 角度6材质：通过下划线栏选择“材质”选项卡链接

我的网站有一个

mat-tab导航栏

导航栏，但是

mat-tab链接

蓝色下划线栏不会追踪活动按钮。它只是停留在第一个按钮上，不动。这些按钮确实会进入活动状态，尽管背景颜色会发生变化，它们会很好地传送到相应的页面

下面是

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

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}}
  </a>
</nav>

<router-outlet></router-outlet>

我错过了什么？谢谢大家!

编辑

我像这样编辑了

app.component.html

，以了解有关链接“活动”状态的更多信息：

---

链接前缺少一个

/

：

{{link.label}

编辑：正确的方法是为所有路由设置非空路径。然后可以将通配符与重定向一起使用

const APP_ROUTES:Route[]=[
{path:'path-1'，component:OneComponent}，
{path:'path-2'，component:twoocomponent}，
{path:'path-3'，component:ThreeComponent}，
{path:'**'，重定向到：'path-1'}，
]

您只需遵循下面的代码即可。

活动的

只是引导类

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

---

您需要将

[routerLinkActiveOptions]=“{exact:true}”

添加到

a

标记中。 它变成

{{link.label}
是活跃的！
没有激活。。。

它对您不起作用，因为每个都有相同的#rla变量

您可以这样做：

{{link.label}

使用不同的局部变量（

#rla1

，

#rla2

）对我有效，因为我没有使用

*ngFor

：

仪表板
报告

感谢您对Edric的回复，但遗憾的是，您的回复没有带来任何不同。这很奇怪，因为我正在使用文档，而且我是Angular 6的新手，所以我不确定我缺少了什么。@MarcusEdensky您是否正确导入了

RouterModule

？你能添加更多代码来显示你的应用程序模块吗？我想我添加了，但请看一看！我刚刚添加了

app.module.ts

代码。谢谢下划线栏对我不起作用，它不会始终如一地追踪预期的项目。而且，这会破坏条的动画。@MarcusEdensky我正面临着完全相同的问题。您找到使用空根路径的解决方案了吗？空路由路径将始终解析所有路径，因此

routerLinkActive

将始终为真。是！！就这样，谢谢你！但是，我怎样才能在不解析所有路径的情况下将路由器路径指定给root？第一个“主页”按钮通常是root！我尝试使用

/

，但是我得到了一个控制台错误

错误：路由“/”的配置无效：路径不能以斜杠开始。也许你可以尝试一个主路由，默认情况下，你的应用程序将重定向到主路由？我真的希望能够有一个根URL，因为主页有一个干净的根URL看起来不错。这不可能吗？这是一个先进的框架，应该可以IMO！谢谢@马库塞登斯基：我面临着完全相同的问题。你找到使用空根路径的解决方案了吗？你的回答非常有助于我理解这个问题，因为我没有使用
*ngFor
来呈现链接。在这种情况下，为每个链接不同地命名本地
#
变量确实起到了作用。Bootstrap类？我认为应该允许它使用确切的：false默认值，但它没有
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 { }

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

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