routerLinkActive 不要触发好的链接答案

【问题标题】：routerLinkActive don't trigger the good linkrouterLinkActive 不要触发好的链接
【发布时间】：2021-01-01 04:11:32
【问题描述】：

所以我已经阅读了一些关于这个主题的文章，但没有找到答案。

用例

如果应用程序在/tools 路由上启动，它就可以工作。然后我切换到/audio，它正在工作。
如果应用程序在/audio 路由上启动，它就可以工作。然后我切换到/tools，它不起作用。活动项目仍然是“音频”，我不知道为什么。

问题

active 类未添加到好项目中。

app.routing.ts

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      { path: '', redirectTo: 'tools', pathMatch: 'full' },
      { path: 'tools', component: ToolsComponent },
      {
        path: 'audio',
        loadChildren: () => import('./audio/audio.module').then(m => m.AudioModule)
      },
    ]
  }
];

audio.module：

@NgModule({
  declarations: [AudioComponent, AudioDetailsComponent],
  imports: [SharedModule, AudioRoutingModule],
})

audio.routing.ts：

const routes: Routes = [
  { path: '', component: AudioComponent },
  { path: ':id', component: AudioDetailsComponent }
];

menu.component.html（在 HomeComponent 中）：

<mat-nav-list fxLayout="column">
  <a mat-list-item [routerLink]="['/tools']" routerLinkActive="active">
    <span mat-line>Tools</span>
    <mat-icon matListIcon>build</mat-icon>
  </a>
  <a mat-list-item [routerLink]="['/audio']" routerLinkActive="active">
    <span mat-line>Audio</span>
    <mat-icon matListIcon>headset</mat-icon>
  </a>
</mat-nav-list>

【问题讨论】：

静态绑定[routerLink]="['/audio']"不需要括号，控制台有错误吗？
我试过有没有。没有变化。不过谢谢！控制台也没有错误：/
尝试使用enableTracing 调试路由事务以获取更多信息，请参阅此处angular.io/api/router/ExtraOptions
当我点击 /tools 时，我有一个 NavigationCancel 事件，错误为 Navigation ID 3 is not equal to the current navigation id 4

标签： angular angular-router

【解决方案1】：

我发现“为什么”它不起作用：在 audio.component.ts 中，我快速连续调用router.navigate。 This answer solved my issue

我只需要重新格式化我的代码。

【讨论】：