首页 文章

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

提问于
浏览 次
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' }
    ];

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

How do I get Named Router Outlets to navigate to along with the non-named router outlets based on the route configuration?

有很多关于如何使用routerLink执行此操作的示例，但仅使用路由配置并没有真正关于它 .

angular angular4-router

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 }

    { path: '', component: NavbarComponent, outlet: 'navbar' } 路线正在为 /app/dashboard 解决，所以我不得不使路线更具限制性 .

    回复于

相关问题