Angular 9:如何重新渲染组件?

问题描述 投票:0回答:1

我有父组件和子组件。如果子组件在内部更新了它的值,我就无法从父组件更新回值。

请看这个Stackblitz的例子。https:/stackblitz.comeditangular-ivy-tynepp。. 当子组件失去焦点时,我触发了事件,父组件重新设置了子组件的值,但我认为是因为父组件的 "this.value "没有变化,更新不会触发子组件的检测变化。但我认为,因为父体的 "this.value "没有变化,更新不会触发子体的检测变化。

我怎样才能解决这个难题?

angular components angular-changedetection
1个回答
1
投票

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

  1. 设置一个临时值
  2. 呼叫 ChangeDetectorRef.detectChanges()
  3. 重置数值
constructor(private changeDetectorRef: ChangeDetectorRef) {}

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

请看 这场突击赛 进行演示。


0
投票

另一种更简单的方法可以是使用模板变量,如下面的例子中可以看到。

parent.component.html

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

解决方案 此处.

© www.soinside.com 2019 - 2024. All rights reserved.