angular - 如何实现变更检测以使给定的示例有效

Question

在此示例中，未实现更改检测，并且翻转按钮不起作用。我将不胜感激有关如何实施它的提示。模型是需要驱动应用程序外观的类。

标签： angularangular2-changedetection

Answer 1

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

<div *ngIf="show"> 

在此处查看有关 ngIf 的更多详细信息

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

一旦完成。我将它添加回来，这样指令将再次添加到新创建的元素中。它的生命周期钩子 ngAfterViewInit 将被触发。查看文档

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

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

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

这是一个简单的例子，可以看到这些钩子的作用。