如何实现变更检测，以便给定的示例工作

Question

在此example中，尚未实现更改检测，并且“翻转”按钮不起作用。我将对如何实施它的提示表示赞赏。模型是需要驱动应用程序外观的类。

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，可以看到这些钩子的作用。