从深层嵌套链接（Angular4）返回父组件后无法导航到子路径

Question

I have set up a plunk to demonstrate the problem:

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

Here is the navigation flow =>

1. Click 'Child2 Link' ( which is inside the child1 component )
2. Click 'Parent Link' ( top level )
3. Click 'Child1 Link' ( will not work )

For some reason, After following the steps outlined above I will no longer be able to navigate anywhere and the app will crash.

Here is the necessary code:

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>

CHILD1

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

ROUTING

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

When running this example locally (through the CLI) I get this error: (which for some reason is not appearing on the 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)

I'm not sure what is causing the crash?

I hope the problem is clear! Please let me know if you need any more information.

Answer 1

Have you tried changing the if condition so that the router-outlet is not included in it? Something like this:

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