模块路由中的 Angular Router 二级菜单

Question

我正在尝试根据模块中指定的路线动态构建辅助导航菜单。路线数据通过解析器传递到导航组件。但是，如果按钮是硬编码的，它就可以正常工作

第一次点击时导航有效，但所有后续点击都会收到错误

 Error: NG04013: Cannot activate an already activated outlet

此修复让我可以工作一次，在此之前它根本无法工作
Angular 7 - 多个插座：错误：无法激活已激活的插座

这是一个有效的 stackblitz 示例

Answer 1

我最终通过做三件事解决了这个问题

1.我在单击时调用一个函数以编程方式导航，而不是导航按钮上的 [routerLink]

<button (click)="go(route)" *ngFor="let route of routes...>

go(route: any) {
    this.router.navigate([route.route])
  }

这处理了顶级菜单，但模块子菜单未使用导航上的不同子模块路线进行更新，因此

2. 导航组件中的路由数组现在是一个BehaviorSubject，因此在路由更改时会发出新的路由数组。这需要向 ngFor 循环添加一个异步管道

ngFor="let route of (routes | async)...

3. 我必须将辅助路由上的守卫和解析器策略设置为“始终”

{
  path: '',
  outlet: 'module-navigation',
  pathMatch: 'full',
  runGuardsAndResolvers: 'always',
  component: NavigationComponent,
  resolve: { routes: ModuleNavigationResolver, menuType: () => "SECONDARY"}
}

stackblitz 已更新