角2 - 子供のルートが親コンポーネントをロード

Question

私のルーティングが私のAngular 2アプリケーションで動作するようにしようとしています。ここで

は私がapp.routes.tsファイル

export const ROUTES: Routes = [ 
    { path: '',  component: PublicComponent, data: { title: 'Heroes List' } }, 
    { path: 'home', component: PublicComponent }, 
    { path: 'admin', component: PrivateComponent, children: [ 
    { path: '', component: PrivateComponent }, 
    { path: 'account-settings', component: AccountSettingsComponent, children: [ 
     { path: '', component: UserInformationComponent}, 
     { path: 'user-information', component: UserInformationComponent}, 
     { path: 'companys-information', component: CompanysInformationComponent} 
    ] }, 
    ] }, 
    { path: '**', component: NoContentComponent }, 
]; 

私はそれが親ルートをアップロード子ルートの1つに移動しようとするたびに使用していたコードです。

だから私はに行って、たとえば言うことができます： -

http://localhost:4200/#/admin

それは正しいコンポーネントPrivateComponentに引っ張ります。

しかし、私はに移動したとき： -

http://localhost:4200/#/admin/account-settings 

やアカウント設定のいずれかの子供たちは、それはあなたが上記を参照できるコードに記載されているようにPrivateComponentなくAccountSettingsComponentまたはUserInformationComponentアップロードします。

これを機能させるために私のコードに何か不足していますか？

Angular CLIを使用してアプリケーションを生成しました。

ありがとうございます。

Answer 1

AngularはSPA（Single Page Application）プラットフォームであるため、シングルページングの手法を使用します。 Angularに子ルートのコンポーネントを読み込ませるには、PrivateComponentに<router-outlet>を含める必要があります。 Router-outletは、子コンポーネントがロードされる場所を示します。

より多くのあなたは、コンポーネント内の別の<router-outlet>を必要としませんDefining Child Routes

Answer 2

参照してください。

代わりの親ルートでcomponentを定義するには、そうのように、親を指す子どものルートパスを持っています。一方

{ path: 'admin', children: [ 
    { path: '', component: PrivateComponent }, 
    { path: 'account-settings', children: [ 
     { path: '', component: AccountSettingsComponent}, 
     { path: 'user-information', component: UserInformationComponent}, 
     { path: 'companys-information', component: CompanysInformationComponent} 
    ] }, 
] }, 

を私が追加<router-outlet>場合を使用することの利点を見ることができます各子ルート、つまりヘッダーに共通の要素を表示する必要があります。