Angular:替换类实例会导致数据绑定失败

Question

Angular 10

这是一个我在很多情况下都会遇到的一般性问题，如果能解决这个问题会很好。

我通常在页面上创建一个类实例，并将其分配给一个变量。例如

this.myProject: Project = new Project();

然后我将其绑定到页面元素：

<app-my-component [project]="myProject"></app-my-component>

然后我需要更新this.myProject对象，并重新分配它：

this.myProject = AN_UPDATED_PROJECT_CLASS_INSTANCE

在大多数情况下，CCD_ 5中的绑定继续工作并且将反映新分配的CCD_；AN_UPDATED_PROJECT_CLASS_INSTANCE"；。

然而，有时绑定会中断。例如，如果我使用ng bootstraps模态，并弹出模态窗口并更新this.myProject，它不会一直绑定到模态窗口，并且原始属性仍然存在。

我假设这是因为我实际上正在用一个全新的对象替换内存中this.myProject引用的对象。如果我逐个更新属性，则绑定工作正常。然而，对于复杂的类结构来说，这显然是不切实际的。

我发现了lodash合并函数，它似乎是更新对象而不是替换对象，并传播更改。

merge(this.myProject, AN_UPDATED_PROJECT_CLASS_INSTANCE);

这是一个好的/合适的解决方案吗？

Answer 1

首先要考虑的是，myProject是否承担了太多的责任？也许可以从将这些关注点划分为不同的对象/输入变量开始，这些对象/变量将在最短的必要时间内正确触发更改检测。

至于触发复杂对象的更改检测，您有几个选项。

1. 克隆对象以创建新引用

# Using the spread operator
this.myProject = {...AN_UPDATED_PROJECT_CLASS_INSTANCE};
# Using object assign
this.myProject = Object.assign({}, AN_UPDATED_PROJECT_CLASS_INSTANCE);

2. 使用可观察的

this.myProject$ = new BehaviorSubject<Project>(new Project());

模板：

<app-my-component [project]="myProject$ | async"></app-my-component>

更新：

this.myProject$.next(AN_UPDATED_PROJECT_CLASS_INSTANCE);

3. 手动触发更改检测

constructure(private cd: ChangeDetectorRef) {}
someMethod() {
this.cd.detectChanges();
}