angular - 从深层嵌套链接返回父组件后无法导航到子路由(Angular4)

Question

我已经设置了一个 plunk 来演示这个问题:

https://plnkr.co/edit/BSxXBkXUFy3FcJTOf84F?p=preview

这是导航流程=>

1. 点击'Child2 Link'(在 child1 组件内)
2. 点击“父链接”(顶级)
3. 点击'Child1 Link'(无效)

出于某种原因，按照上述步骤操作后，我将无法再导航到任何地方，应用程序将崩溃。

这是必要的代码:

家长

 <div *ngIf="router.url != '/parent/child2'">
      <ul>
        <li><a routerLinkActive="active" routerLink="child1">Child1</a></li>
      </ul>

      <router-outlet></router-outlet>

 </div>

 <div *ngIf="router.url == '/parent/child2'">
       <router-outlet></router-outlet>
 </div>

child 1

  <div>
      <a routerLinkActive="active" routerLink="../child2">Child2</a>
  </div>

路由

const appRoutes: Routes = [
  {path: '', redirectTo: '/parent/child1', pathMatch: 'full'},
  {
    path: 'parent',
    component: ParentComponent,
    children: [
      {path: 'child1', component: Child1Component},
      {path: 'child2', component: Child2Component}
    ]
  }
];

当在本地(通过 CLI)运行这个例子时，我得到这个错误:(由于某种原因没有出现在 plunk 上)

ERROR Error: Uncaught (in promise): Error: Cannot activate an already activated outlet
Error: Cannot activate an already activated outlet
    at RouterOutlet.webpackJsonp.../../../router/@angular/router.es5.js.RouterOutlet.activateWith (router.es5.js:5430)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4578)
    at router.es5.js:4529
    at Array.forEach (<anonymous>)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4529)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4546)
    at router.es5.js:4529
    at Array.forEach (<anonymous>)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4529)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activate (router.es5.js:4422)
    at RouterOutlet.webpackJsonp.../../../router/@angular/router.es5.js.RouterOutlet.activateWith (router.es5.js:5430)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4578)
    at router.es5.js:4529
    at Array.forEach (<anonymous>)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4529)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateRoutes (router.es5.js:4546)
    at router.es5.js:4529
    at Array.forEach (<anonymous>)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activateChildRoutes (router.es5.js:4529)
    at ActivateRoutes.webpackJsonp.../../../router/@angular/router.es5.js.ActivateRoutes.activate (router.es5.js:4422)
    at resolvePromise (zone.js:770)
    at resolvePromise (zone.js:741)
    at zone.js:818
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (core.es5.js:3924)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

我不确定是什么导致了崩溃？

希望问题清楚!如果您需要更多信息，请告诉我。

Answer 1

您是否尝试过更改 if 条件以便路由器 socket 不包含在其中？像这样:

 <div *ngIf="router.url != '/parent/child2'">
      <ul>
        <li><a routerLinkActive="active" routerLink="child1">Child1</a></li>
      </ul>
 </div>
 <router-outlet></router-outlet>