ライフサイクルフックメソッドのAngular2変更検出

Question

ngOnInit（）にスピンナを表示し、ngAfterViewInit（）で非表示にしたいとします。 setTimeout（）なし

• は、何ものsetTimeout（）、スピナーショーと非表示（点滅）と
• を起こりませんが、ngAfterViewInit（）の後に

http://plnkr.co/edit/M1g7DT1Eks2gtuSXi1B1?p=preview

： しかし、これは動作しません

スピナーコンポーネント（spinner.ts）は、背景色を変更するdivタグです。 clicクリックで

import {Component, Input} from '@angular/core' 

@Component({ 
    selector: 'my-spinner', 
    template: ` 
    <div [style.background-color]="status ? 'red' : 'yellow'" > 
     spinner is {{status}} 
    </div> 
    `, 
}) 
export class MySpinner { 
    @Input() status: boolean; 

    status:boolean; 
    constructor() { 
    this.status = false; 
    } 

    getColor() { 
    if (status) { 
     return "red"; 
    } else { 
     return "yellow"; 
    } 
    } 

    ngOnChanges(changes: {[propertyName: string]: SimpleChange}) { 
     for (let propName in changes) { 
      let chng = changes[propName]; 
      let cur = JSON.stringify(chng.currentValue); 
      let prev = JSON.stringify(chng.previousValue); 
      console.trace(`${propName}: currentValue = ${cur}, previousValue = ${prev}`); 
     } 
    } 
} 

（mycomponent.ts） '私のコンポーネントへのリンク' に、私は、背景色のスピナーがngOnInit（）とngAfterViewInit（）の間に赤で欲しいです。

import {Component, Input, ApplicationRef} from '@angular/core'; 
import {AppService} from './appservice'; 

@Component({ 
    selector: 'my-component', 
    template: ` 
    <div> 
     This is my component! 
    </div> 
    `, 
}) 
export class MyComponent { 

    constructor(private appSvc: AppService) { 

    } 

    ngOnInit(): void { 

    this.appSvc.setVisible(true); 
    console.log('MyComponent - ngOnInit'); 
    } 

    ngAfterViewInit() { 
    var start = new Date().getTime(); 
     for (var i = 0; i < 1e7; i++) { 
      if ((new Date().getTime() - start) > 10000){ 
       break; 
      } 
     } 

    //setTimeout(() => { this.appSvc.setVisible(false)}); 
    this.appSvc.setVisible(false); 

    console.log('MyComponent - ngAfterViewInit'); 
    } 

} 

解決策は何ですか。

---

UPDATE

私は、観察に使用するサンプルhttp://plnkr.co/edit/M1g7DT1Eks2gtuSXi1B1?p=previewを更新します。

私は（ngOnInitに表示するスピナーを設定）が、ngOnChanges（）スピナーコンポーネントのは、（ngAfterViewInit後に呼び出される）

ログコンソールは次のとおりです。

VM437 AppService - setVisible - true 
VM439 mycomponent.ts!transpiled:33 MyComponent - ngOnInit 
VM439 mycomponent.ts!transpiled:37 MyComponent - ngAfterViewInit -begin 
VM439 mycomponent.ts!transpiled:47 MyComponent - ngAfterViewInit -end 
**VM440 spinner.ts!transpiled:38 status: currentValue = true, previousValue = fals** 
VM437 appservice.ts!transpiled:27 AppService - setVisible - false 
VM439 mycomponent.ts!transpiled:45 Observable Complete 
**VM440 spinner.ts!transpiled:38 status: currentValue = false, previousValue = true** 

だからがあるようですライフサイクルフックメソッドの検出をすぐに変更する必要はありませんか？間違いなく？

Answer 1

これを達成するには、<my-app>タグの内側にスピンナーを非角度成分として直接置きます。このようにして、アプリケーションが完全に読み込まれるまで表示されるスピナーを取得できます。

角型コンポーネントを使用してこれを達成しようとすると、角型アプリケーションがロードされるまで、スピンは表示されず、読み込まれると、その時点でスピナーは役に立たなくなります。