Angular2のルート変更時にサービス変数をリセットする

Question

私はUIサービスを使用して、自分のページの要素の外観を設定しています。このサービスのメンバーは、各ルートで変更され、ヘッダー&ページスタイリングがどのように見えるかを決定します。

例：それは光に設定されている場合
サービス部材headerStyleが暗いに設定されている場合は、暗いヘッダテーマがそのルートのために使用される、&、次いで光テーマはそうで&を用いています。 I 'はroute2' から 'route1の' ルートを変更したとき

Iが直面probelmは、I手動 'route2' にサービスメンバーをリセットする必要があります。これらの新しいスタイルはわずか2〜3ページしか適用されないため、これはやや面倒ですが、このサービスをすべてのページで呼び出す必要があります。それ以外の場合、サービスの値は変更されません。&以前のルートのスタイルはそのままです。

ルートを変更するとすぐにすべてのUIサービススタイルをデフォルトにリセットし、ルート変更が完了したら新しいページにUIサービスの新しい値が含まれているかどうかを確認してくださいデフォルトのスタイルを使用します。

この質問は似ています
How to detect a route change in Angular 2?

しかし、ここでルート変更イベントは、それがデフォルトでそれを上書きし、どのようなコードがページ上にあるので、関係なく、ルートの変更が行われた後に解雇されていません！

Answer 1

イベントに登録すると、複数のナビゲーションイベントを追跡できます。 APIドキュメントを参照してください。これらのイベントの1つはNavigationStartです。また、StyleServiceにルーターサービスを導入してイベントを購読することもできます。

@Injectable() 
export class StyleService{ 
    constructor(private router: Router){ 
     router.events.subscribe((val) => { 
      if (val instanceof NavigationStart) { 
       this.resetStyle(); 
      } 

      if (val instanceof NavigationEnd) { 
       this.setStyle(router.routerState); 
      } 
     }); 
    } 
}