如何实现变化检测以便给定的示例有效

Question

在此 example 中，更改检测尚未实现，翻转按钮不起作用。我将不胜感激关于如何着手实施它的提示。该模型是需要驱动应用程序外观的 class。

Answer 1

我使用 *ngIf 从 DOM 中删除了 div 元素。

<div *ngIf="show">

查看有关 ngIf 的更多详细信息here

这里有趣的一点是 ngIf 不仅会隐藏 DOM 节点，还会破坏它（将其从 DOM 中删除）。一旦条件为真，将创建新实例。

完成后。我把它加回去，这样指令将再次添加到新创建的元素中。并且它的生命周期钩子 ngAfterViewInit 将被触发。参见 docs

  ngOnInit() {
    console.log(`SomeComponent[${this.randomNumber}]::ngOnInit`);
  }

  ngAfterViewInit() {
    console.log(`SomeComponent[${this.randomNumber}]::ngAfterViewInit`);
  }

  ngOnDestroy() {
    console.log(`SomeComponent[${this.randomNumber}]::ngOnDestroy`);
    console.log('');
  }

这是一个简单的 example 来查看这些挂钩的实际效果。

如何实现变化检测以便给定的示例有效

How to implement change detection so the given example works

angular2-changedetection

angular