Question

我设置了一个插件来证明问题：

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

这是导航流程=＆gt;

点击'Child2 Link'（位于child1组件内）
点击'家长链接'（顶级）
点击'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>

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}
    ]
  }
];

在本地运行此示例时（通过CLI）我收到此错误:(由于某种原因，它没有出现在插件上）

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>

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

1 个答案: