2017-06-28 13 views
0

角度は、単一ページのアプリケーション用に構築されているので、ルートを変更できるようにすべきであるが、唯一のブラウザウィンドウ内の特定の要素が、右、変更されているようなナビゲーションを維持しますか?例えば角度変化のルートが、

私は、メインのナビゲーションコンポーネントとコンテンツ領域のコンポーネントと簡単なページがあります。

別のルートに移動し、そのままメインナビゲーションコンポーネントを維持することは可能でしょうか?

私は別のルートに移動しないと、現在、メインナビゲーションコンポーネントは常に(のOnInitが発射される)再ロードされます。

どのような考えですか?

ありがとうございます!

答えて

1

は、あなたが別のルートに割り当てられている別のコンポーネントにメインナビゲーションコンポーネントが埋め込まれているようです。私が提案できるのは、すべてのページに共通のナビゲーションがある場合、それをrouter-outletと同じレベルのapp.componentに保持します。ちょうどofficial example from Angular teamのように。

あなたはルートを変更したときので、それだけでルータコンセントに影響します。あなたのメインナビゲーションは一度だけ起動されます。

主navigation.component.ts

@Component({ 
    selector: 'main-navigation', 
    template: ` 
    <nav> 
     <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a> 
     <a routerLink="/heroes" routerLinkActive="active">Heroes</a> 
    </nav> 
    ` 
}) 

export class MainNavigationComponent { 

} 

app.component.ts

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <main-navigation></main-navigation> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'Tour of Heroes'; 
}