Angular2：ルーティング制限の子が動作しない

Question

私のアプリケーションには2つの主要な領域があります。それぞれは独自のナビゲーションバーとコンテンツを持つ必要があります。そのため、私は両方の領域をレンダリングしたいルータ出口を持っています.1つは、すべてのユーザの時間のない領域と、ログインしたユーザのプライベート領域です。

app.component.html

<router-outlet></router-outlet> 

FreeAreaComponentとRestrictAreaComponent、前に言ったように、独自のナビゲーションバーとコンテンツを持っています。コードの再利用性に考えると、私は怒鳴るように、子ルータのコンセントとしてのみコンテンツナビゲーションバーとルートを保つ：

FreeAreaComponentはオン

<app-free-navbar></app-free-navbar> 
<router-outlet></router-outlet> 

RestrictAreaComponent

<app-restrict-navbar></app-restrict-navbar> 
<router-outlet></router-outlet> 

フリーエリアでは、呼び出される必要があるデフォルトのコンポーネントはLandingComponentです。これは私のランディング "ページ"です（これはSPAであることがわかっているため引用しています）。

制限区域では、デフォルトのものがウェルカム「ウェルカム」です（見積もりは、SPAであることがわかっているため）。そのため、上記の行動の

、ルーティングルールは怒鳴るようなものです：

アプリ-routing.module.ts

const appRoutes: Routes =[ 
{ path: '', component: FreeAreaComponent, children: [ 
    { path: '', component: LandingComponent, pathMatch: 'full' }, 
    { path: 'signup', component: SignupComponent }, 
    { path: 'signin', component: SigninComponent } 
]}, 
{ path: 'restrict', canActivateChild: [AuthGuard], component: RestrictAreaComponent, children: [ 
    { path: 'restrict', component: WelcomeComponent }, 
    { path: 'categories', component: CategoriesComponent } 
]}, 
{ path: '**', redirectTo: '', pathMatch: 'full'}]; 

私は、アプリケーション、フリーエリア（到達しようリンク先ページ）は正常に動作しますが、制限領域ではありません。制限付きナビゲーションバーは表示されますが、コンテンツは表示されません。

私が持っているいくつかの確信：私はそのngOnInit内にconsole.log を入れて、それが記録されたと制限ナビゲーションバーが

canActivateChildルールが戻っ でレンダリングされるので

• がRestrictAreaComponentが、到達しましたつまり、ユーザーがログインしていることを認識しています。
• WelcomeComponentはトリガーされていません。私はそのngOnInitにconsole.logを置き、何もコンソールには記録されませんでした。

ルートのパスを子で繰り返すことは問題ではありませんが、なぜこのようなことが起こりますか？

Answer 1

あなたが制限の2人の子供は、次のパスで到達することができることを実現：あなただけroot/restrictedに移動している場合

root/restrict/restrict -> WelcomeComponent (injected into router outlet in RestrictAreaComponent) 
root/resitrct/categories -> CategoriesComponent (injected into router outlet in RestrictAreaComponent) 

、あなたがないのコンテンツが内部のルータ口に注入されますRestrictAreaComponent。

WelcomeComponentをナビゲーションに注入してroot/restrictedに注入する場合は、ルーティングの定義を変更する必要があります。

UPDATE： に変更することにより：

const appRoutes: Routes =[ 
{ path: '', component: FreeAreaComponent, children: [ 
    { path: '', component: LandingComponent, pathMatch: 'full' }, 
    { path: 'signup', component: SignupComponent }, 
    { path: 'signin', component: SigninComponent } 
]}, 
{ path: 'restrict', canActivateChild: [AuthGuard], component: RestrictAreaComponent, children: [ 
    { path: '', component: WelcomeComponent, pathMatch: 'full' }, 
    { path: 'categories', component: CategoriesComponent } 
]}, 
{ path: '**', redirectTo: '', pathMatch: 'full'}]; 

あなたは今、次のようにナビゲートすることができるはずです。

root/restrict -> WelcomeComponent (injected into router outlet in RestrictAreaComponent) 
root/restrict/categories -> CategoriesComponent (injected into router outlet in RestrictAreaComponent) 

は、私がAngular2としているため、新しい午前、それは