Question

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

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

被抛出。

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

应用-central.routing.ts

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

标准-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执行此操作的示例，但仅使用路由配置并没有真正关于它。

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

正在为 / app / dashboard 解析 {路径：''，组件：NavbarComponent，outlet：'navbar'} 路由，所以我必须制作路线限制性更强。

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

1 个答案: