各ページでナビゲーションコンポーネントがリフレッシュされます

Question

私のAngular2アプリでは、複数のコンポーネントの中にいくつかのページがあります。

私はこれ持っている私のapp.component.htmlで

：私は、ページにナビゲーションバーとフッターをロードする際に今

<div class="container dashboard page"> 
    <app-nav></app-nav> 
    <div class="main"> 
    <p></p> 
    </div> 
    <app-footer></app-footer> 
</div> 

：

<router-outlet></router-outlet> 

とコンポーネントのHTML内にこのような何かを常にリフレッシュしてください。論理的ですが、app.component.htmlでこれを行う必要があると仮定するのは正しいですか？

<app-nav></app-nav> 
<router-outlet></router-outlet> 
<app-footer></app-footer> 

このベストプラクティスは、ナビゲーションとフッタがリフレッシュされないようにする別の方法ですか？

Answer 1

このベストプラクティスは、navと フッターがリフレッシュされないようにする別の方法ですか？

はい、そうです。ルート変更に伴って "グローバルコンポーネント"を変更したくないので、ルート変更時に変更するコンポーネントの内部に配置しないでください。角2はすべてコンポーネント間の関係であり、アプリの構築時にはそのネストは重要な部分です:)。

わずか数引数：

• あなたがrouter-outlet以内にあなたのグローバルコンポーネントを置く場合は、DRYルールに反している同じコードを、繰り返します。グローバルコンポーネントの変更を想像してください。すべての単一ページコンポーネントを更新する必要があります。
• グローバルコンポーネントの状態がAngularによって提供されるルーターに完全に依存する場合は、アーキテクチャが悪いです。ルーターはルーティングを担当し、現在のページに準拠している場合、ページコンポーネントはグローバルコンポーネントの変更を管理する必要があります。
• グローバルコンポーネントとページコンポーネント間の通信は、RxJs件名のサービスで行う必要があります。私はそれをhereと記述しました。このようにして、ページコンポーネントとグローバルコンポーネントの間のブリッジである単一オブジェクトでグローバルコンポーネントの状態を制御できます。