从深度嵌套的 link 返回到 parent 组件后无法导航到 child 路由（Angular4）

Question

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

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

这是导航流程=>

单击 'Child2 Link'（在 child1 组件内）
点击'Parent Link'（顶层）
点击'Child1 Link'（无效）

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

这里是必要的代码：

PARENT

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

孩子 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 条件以使其不包含路由器插座？像这样：

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

从深度嵌套的 link 返回到 parent 组件后无法导航到 child 路由（Angular4）

Cannot navigate to child routes after returning to parent component from deeply nested link (Angular4)

angular2-routing

angular