Naviguer par rapport au sous-module dans Angular

Question

J'ai des modules imbriqués avec différents préfixes d'URL. Maintenant, je veux naviguer dans un module sans spécifier le préfixe (dans mon module, je ne veux pas savoir sous quel préfixe le module est accessible).

Ce sont les routes pour mon app.module:

const APP_ROUTES: Routes = [ 
    { 
     path: '', 
     children: [ 
      { path: '', component: MainComponent }, 
      { path: 'nested', loadChildren: 'app/nested/nested.module#NestedModule' } 
     ] 
    } 
]; 

export const routing = RouterModule.forRoot(APP_ROUTES, { useHash: true }); 

Ce sont les routes pour mon nested.module:

const APP_ROUTES: Routes = [ 
    { 
     path: '', 
     component: NestedComponent, 
     children: [ 
      { path: '', component: NestedSubComponent }, 
      { path: 'sub', component: NestedSubComponent }, 
      { path: 'sub/:id', component: NestedSubComponent } 
     ] 
    } 
]; 

export const routing = RouterModule.forChild(APP_ROUTES); 

Maintenant, je veux par exemple pour naviguer à partir de/#/imbriquée/sub à/#/nested/sub/123. Comment puis-je atteindre cet objectif? Je ne sais pas à quel point je suis imbriqué dans mon sous-module (ie si mon sous-routage est/ou/sub ou/sub /: id) et aussi je ne veux pas utiliser le préfixe imbriqué comme je veux avoir une solution générique être utilisé pour d'autres sous-modules, aussi.

Answer 1

Vous pouvez utiliser le second paramètre de la méthode Router.navigate() pour spécifier l'option relativeTo, puis naviguer dans cette option.

constructor(private router: Router, 
      private activatedRoute: ActivatedRoute) {} 

goDeeper() { 
    this.router.navigate(['next-nested-route'], {relativeTo: this.activatedRoute}); 
} 

goBack() { 
    this.router.navigate(['../'], {relativeTo: this.activatedRoute}); 
} 

Vous pouvez également utiliser la directive routerLink, qui a ActivatedRoute est implicitement, il suffit de ne pas y mettre la première barre oblique.

<a routerLink="/next">absolute</a> 
<a routerLink="next">relative next</a> 
<a routerLink="..">relative back</a> 

Plus à ce sujet dans docs angulaires: https://angular.io/guide/router#!#relative-navigation