Question

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

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

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

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

<?php
$array1 = array("a" => "green", "red", "blue", "red");
$array2 = array("b" => "green", "yellow", "red");
$result = array_diff($array1, $array2);
print_r($result);
?>

on clic on＆＃39; link to my component＆＃39; （mycomponent.ts），我希望ngOnInit（）和ngAfterViewInit（）之间的背景颜色微调器是红色的。

Array
(
    [1] => blue
)

解决方案是什么？

更新

我更新示例http://plnkr.co/edit/M1g7DT1Eks2gtuSXi1B1?p=preview以使用observable。

我将微调器设置为在ngOnInit（）中显示，但是在ngAfterViewInit（）

之后调用微调器组件的ngOnChanges（）

日志控制台是：

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}`);
        }
    }
}

所以似乎生命周期钩子方法中没有立即更改检测？是对还是错？

Answer 1

为了实现这一点，我认为最好将微调器直接放在<my-app>标签内作为非角度组件。通过这种方式，您可以获得显示直到应用程序完全加载的微调器。

如果您尝试使用角度组件实现此操作，则在加载角度应用程序之前，微调器不会显示，并且在加载角色应用程序时，旋转器此时无用。

生命周期钩子方法中的Angular2变化检测

1 个答案: