サブモジュールに相対的な角度で移動する

Question

異なるURL接頭辞を持ついくつかのネストされたモジュールがあります。今私は接頭辞を指定せずに1つのモジュール内を移動したい（私のモジュールでは、どの接頭辞の下でモジュールにアクセスできるかを知りたくない）。

これらは私の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 }); 

は、これらは私の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); 

は、今私は、ネストされた/＃/から移動するため、たとえばたい/ subを/＃/ nested/sub/123に設定します。どうすればこれを達成できますか？私は自分のサブモジュールにネストされている深さ（私のサブルートが//subか/ sub /：idの場合）を知っていますし、ネストされたプレフィックスを使いたくないのです。他のサブモジュールにも使用できます。

Answer 1

Router.navigate()メソッドの第2パラメータを使用してrelativeToオプションを指定すると、そのルートに対して相対的にナビゲートします。

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

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

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

また、暗黙的に設定さActivatedRouteを持ってrouterLinkディレクティブを使用することができますそこに最初のスラッシュを入れないでください。角度のドキュメントでこれについてもっと

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

：https://angular.io/guide/router#!#relative-navigation