angular - routerLinkActive 不要触发好的链接

Question

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

用例

• 如果应用程序在/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)
      },
    ]
  }
];

音频模块：

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

标签： angularangular-router

Answer 1

我发现“为什么”它不起作用：在 audio.component.ts 中，我router.navigate快速连续调用。这个答案解决了我的问题

我只是必须重新格式化我的代码。