Angular 4路由器不会根据路由更改命名路由器出口答案

【问题标题】：Angular 4 Router not changing named router outlets based on routeAngular 4路由器不会根据路由更改命名路由器出口
【发布时间】：2018-02-10 21:45:49
【问题描述】：

当我导航到 / 时，正确的 NavbarComponent 会显示在名为“navbar”的路由器插座上。但是，当我导航到 /app/dashboard 时，AppCentralNavbarComponent 没有显示在名为“navbar”的路由器插座上，而是出现以下错误：

ERROR 错误：未捕获（承诺中）：错误：无法激活已激活的插座错误：无法激活已激活的插座

被抛出。

app.routing.ts

export const routes: Routes = [
  { path: '', component: NavbarComponent, outlet: 'navbar' },
  { path: 'account', loadChildren: './features/account/account.module#AccountModule' },
  { path: 'app', loadChildren: './features/app-central.module#AppCentralModule' },
  { path: '*', component: HomeComponent }
];

app-central.routing.ts

    export const routes: Routes = [
      { path: 'dashboard', component: DashboardComponent },
      { path: '', component: AppCentralNavbarComponent, outlet: 'navbar' },
      { path: '', component: AppCentralSidebarComponent, outlet: 'sidebar' }
    ];

standard-layout.component.html

<div>
  <router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
  <o-app-alert></o-app-alert>
  <o-sidebar></o-sidebar>
  <o-body></o-body>
  <router-outlet name="popup"></router-outlet>
</div>

如果您想查看格式更好的代码：https://github.com/angular/angular/issues/19001

如何根据路由配置让命名路由器插座与未命名路由器插座一起导航到？

有很多关于如何使用 routerLink 进行此操作的示例，但仅使用路由配置就没有真正的意义。

【问题讨论】：

我不确定这是否可行。尝试使用routerLink 或router.navigate() 导航到指定的网点。有一些带有示例的答案（也在 angular.io 中）
所以我想到了这一点，但是每次我从具有另一种“导航栏”类型的页面路由到具有新导航栏组件的页面时，我必须基本上确保我更改导航栏组件也是。嗯。看起来真的是多余的。
今天没时间仔细看...

标签： angular angular4-router

【解决方案1】：

好吧，其实这是我自己想出来的。

添加以下对调试有很大帮助。

RouterModule.forRoot(routes, { enableTracing: true})

我必须对 app.routing.ts

进行以下修改

  { path: 'account/*', component: NavbarComponent, outlet: 'navbar' },
  { path: '', component: NavbarComponent, pathMatch: 'full', outlet: 'navbar' },
  { path: 'account', loadChildren: './features/account/account.module#AccountModule' },
  { path: 'app', loadChildren: './features/app-central.module#AppCentralModule' },
  { path: '*', component: HomeComponent }

{ path: '', component: NavbarComponent, outlet: 'navbar' } 路线正在为 /app/dashboard 解决，所以我必须制定路线更严格。

【讨论】：