Angular9：如何re-render组件

Question

我有一个 parent 和一个 child 组件。如果 child 组件在内部更新其值，我无法从 Parent.

更新值

请参阅此 Stackblitz 中的示例：https://stackblitz.com/edit/angular-ivy-tynepp。当 child 组件失去焦点时，我会触发一个事件，并且 parent 会重置 child 组件的值。但我认为，因为 parent 的“this.value”没有更改，所以更新不会触发 child.

中的检测更改

我该如何解决这个难题？

Answer 1

正如你所说，没有触发变化检测，因为绑定值没有变化。您可以通过以下步骤强制更新数据绑定：

设置一个临时值
致电ChangeDetectorRef.detectChanges()
重置值

constructor(private changeDetectorRef: ChangeDetectorRef) {}

resetValue() {
  this.value = "____TempValue____";
  this.changeDetectorRef.detectChanges();
  this.value = "";
}

有关演示，请参阅 this stackblitz。

Answer 2

另一种更简单的方法是使用模板变量，如下例所示：

parent.component.html

<app-my-child 
  #child
  (lostFocus)="child.value = ''"></app-my-child>

可用的解决方案here。

Answer 3

我已经为我的项目创建了一个指令，它真的很容易使用

<ng-container *rerender='changingInput'>
  this content will be re-rendered everytime `changingInput` changes
</ng-container>

查看我的Gist了解更多详情。

Angular9：如何re-render组件

Angular 9: how to re-render component

components

angular

angular-changedetection