0

当我导航到/时，正确的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 }
];

app-central.routing.ts

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

标准布局.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 执行此操作的示例，但仅使用路由配置就没有任何实际意义。

4

1 回答 1

2

好吧，实际上我是自己想出来的。

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

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解析 { path: '', component: NavbarComponent , outlet: 'navbar' }路线，因此我必须使路线更具限制性。

于 2017-09-01T20:42:35.453 回答