Angular 9：如何重新渲染组件

Question

我有一个父组件和一个子组件。如果子组件在内部更新其值，则我无法从父组件中更新该值。

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

如何解决这个问题？

- Andrei V

---

请提供一个最小可重现示例（MRE）。 - jonrsharpe

请检查我提供的 Stackblitz 链接。 - Andrei V

从上面的链接中，原文强调：“请确保所有重现问题所必需的信息都包含在问题本身中”。 - jonrsharpe

你是想从父组件中仅更改子组件的值吗？还是希望两个组件具有相同的值？ - bjdose

只返回子组件的值 @bjdose - Andrei V

Answer 1

像您所说的那样，未触发变更检测是因为绑定的值没有改变。您可以通过以下步骤强制更新数据绑定：

1. 设置一个临时值
2. 调用 ChangeDetectorRef.detectChanges()
3. 重置该值

constructor(private changeDetectorRef: ChangeDetectorRef) {}

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

请查看此StackBlitz以获取演示。

- ConnorsFan

---

有点 hackish 但是起到了作用。谢谢 @ConnorsFan。我很惊讶居然没有更简洁的解决方案。 - Andrei V

你是个大师兄。整整一天后，最终只有这种方法对我有效，即从组件中触发的方法动态禁用ng-select选项。非常感谢。 - 10101101

Answer 2

我已为我的项目创建了一个指令，它非常易于使用。

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

请查看我的Gist以获取更多细节。

- Anh Nguyen

Answer 3

这里有另一个简单的技巧。

浏览器/Angular 不太能准确检测原始数据类型的变化。如果你依赖于它，那么可以将你的原始数据类型转换成对象。Angular 更能准确地检测对象的变化。

例如：

如果在 TS 中有以下代码：

refreshOnThisValue: number = 0;

在 HTTP 视图中：

<ng-container *ngIf="refreshOnThisValue">

   ... render something

   show value: {{ refreshOnThisValue }}

</ng-container>

在ts中进行更改：

refreshOnThisValue: Number = new Number(0);

在 TypeScript 代码的某个地方，需要更改值并触发刷新，请输入：

                  // newValue is the new number

this.refreshOnThisValue = new Number(newValue);

在HTTP视图中：

<ng-container *ngIf="refreshOnThisValue">

   ... render something

   show value: {{ refreshOnThisValue.valueOf() }}

</ng-container>

- Felix

Answer 4

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

parent.component.html

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

解决方案在这里可用。

- bjdose

---

看起来这个解决方案只在失去焦点时第一次有效，之后就不会重置了。@bjdose - Andrei V