角度2ローディングバーでルートを変更する

Question

私はベストプラクティスを探しています。私がルートを変更しているときは、ロード中のgifが必要です。だから私はサービス

import { Injectable } from '@angular/core'; 

@Injectable() 
export class LoadingService { 

public active = false; 

constructor() { } 

start(): void { 
    this.active = true; 
} 

stop(): void { 
    this.active = false; 
} 

} 

とだから私は、コンポーネントにしてngOnInitとngOnDestroy

ngOnInit() { 
    this.loading.stop(); 
} 

ngOnDestroy() { 
    this.loading.start(); 
} 

上でこのサービスを注入してる部品

import { Component } from '@angular/core'; 
import { LoadingService } from '../_services/index'; 

@Component({ 
selector: 'my-loading-component', 
template: `<div *ngIf="loading.active" id="loadingDiv"></div>`, 
styles: [` 
#loadingDiv{ 
    background-color: black; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    z-index: 10000; 
    background-image: url('ring.svg'); 
    background-position: center center; 
    background-repeat: no-repeat; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
} 
`] 
}) 
export class LoadingComponent { 

constructor(public loading: LoadingService) { 
    this.loading.active = true; 
} 

} 

を作成するには、任意の他の提案を持っていますか。 .. "すべてのコンポーネントではなく"ワンタイムコード "で？

this.router.events 
     .subscribe((data: any) => { 
      if (data instanceof NavigationStart) { 
       this.loading = true; 
      } 

      if (data instanceof NavigationEnd) { 
       this.loading = false; 
      } 
      console.log(data, 'route event'); 
     }); 

あなたは、あなたの質問にあるよう次にloading変数を使用する - ：あなたは、ルータのイベントをサブスクライブでき、あなたのルートアプリケーションのコンポーネント、このようなものの中で

Answer 1

。