简体   繁体   中英

In Angular 8 Router parent route remains the same when navigating to the route with other parent

I'm working on a project written on Angular (v8.2.8) and use router with the same version. The architecture of the routing is the following:

I have app-routing.module.ts where I have 3 entries for routes array: Shell.childRoutes([...array of routes]), Case.childRoutes([...array of routes]), { path: '**', redirectTo: '/', pathMatch: 'full' }

Shell - that is parent component for app internal pages. Case - that is parent component for app public pages.

Method child routes do almost the same for both components:

export class Shell {
  static childRoutes(routes: Routes): Route {
    return {
      path: 'app',
      component: ShellComponent,
      children: routes,
      canActivate: [AuthenticationGuard],
      data: { reuse: true }
    };
  }
}

and

export class Case {
  static childRoutes(routes: Routes): Route {
    return {
      path: '',
      component: CaseComponent,
      children: routes,
      data: { reuse: true }
    };
  }
}

App have dashboard component for Shell parent and home component for Case parent. User loads the page at home route and markup is the following:

<app-root>
  <app-case> 
    <router-outlet></router-outlet>
    <app-home></app-home>
  </app-case>
</app-root>

And after redirect to the dashboard route I expect to have the following markup:

<app-root>
  <app-shell> 
    <router-outlet></router-outlet>
    <app-dashboard></app-dashboard>
  </app-shell>
</app-root>

But I receive

<app-root>
  <app-case> 
    <router-outlet></router-outlet>
    <app-dashboard></app-dashboard>
  </app-case>
</app-root>

So the exact issue is in test case: User is on a route which exist in Shell parent. Then if user will be redirected to any route in Case parent - the parent will stays the Shell. And the same situation works in other direction. If Case route was load first, after redirect to Shell route parent will stay the case.

I tried to edit different parameters in the childRoutes method, but no success, I just don't understand is it the issue in the engine, or I just need to specify some additional parameters.

Basically I resolved this issue. For those who had the same issue - for me issue was in custom route reusable strategy which was implemented. When I was switching from Case to Shell route-reusable-strategy function shouldReuseRoute returned true, so route was reused.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM