生命周期挂钩方法中的Angular2更改检测

Question

我想在ngOnInit（）中显示一个微调框，然后在ngAfterViewInit（）中将其隐藏。 但这不起作用：

• 没有setTimeout（），什么都不会发生
• 使用setTimeOut（），微调器显示和隐藏（闪烁），但在ngAfterViewInit（）之后

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

在此示例中，微调器组件（spinner.ts）是一个div标签，用于更改背景颜色。

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>标记内。 这样，您可以获得在应用程序完全加载之前一直显示的微调器。

如果尝试使用角度组件来实现此目的，则直到加载了角度应用程序后，微调器才会显示，并且当加载了角度应用程序时，此时微调器是无用的。