角度2の子ルーティングを設定する

Question

連絡先、ログイン、編集などの異なるルートを持つアプリがあります。連絡先ルートには2つの子ルートがあります。スプレッドシート、top-filters &などがあります。だから、contact/spreadsheetを押すたびに、トップ共通のコンポーネント（トップ・ナビゲーション、トップ・フィルタ）がリロードされ、今度は、contact/two-panelをヒットすると、これらの一般的なコンポーネントが再びリロードされます。だから私はこれをいかに防ぐことができるのですか？以下は、私のコードは次のとおりです。

{ 
    path: 'contact', component: ContactParent, 
    children: [ 
     { path: '', redirectTo: 'spreadsheet', pathMatch: 'full' }, 
     { path: 'spreadsheet', component: Spreadsheet }, 
     { path: 'two-panel', component: TwoPanel } 
    ] 
}, 
{ path: 'login', component: Login }, 
{ path: 'edit', component: EditSingleContact } 

、ここでは、親要素のテンプレートです：

<!-- ContactParent template --> 
<top-nav></top-nav> 
<top-filter></top-filter> 

<router-outlet></router-outlet> 

<cancel-payment></cancel-payment> 
<delete-dialog></delete-dialog> 
<create-link></create-link> 
<message></message> 

<!-- main.html --> 
<main> 
    <router-outlet></router-outlet> 
</main> 

Answer 1

あなたの構造は、あなたのルート要素であるどちらのテンプレート

のすべて間違っている、それはすべて、このコンポーネントが含まれている必要があります。これはあなたのparent.component.htmlだけ含まれている必要があり

 <top-nav></top-nav> 
    <top-filter></top-filter> 
    <router-outlet></router-outlet> 
    <cancel-payment></cancel-payment> 
    <delete-dialog></delete-dialog> 
    <create-link></create-link> 
    <message></message> 
    <parent-component></parent-component> //include this Parent component template 

あなたapp.component.htmlであると仮定します。 parentComponentにテンプレートがのみのparentComponentのため&指令はparent.component

例に含まれるべきであるルータのコンセントを含める必要があります

<router-outlet></router-outlet> 

このようにして、すべてのコンポーネントが1回だけ呼び出されます。