Angular 15子组件输入变更后UI未更新问题求助

我有一个包含两个子组件的父组件，模板代码如下：

<span>Timings:</span>
<sir-project-fasetiming [faseTiming]="projectTiming.timingInitiatie" (faseTimingChanged)="faseTimingChanged($event, 'timingInitiatie')"></sir-project-fasetiming>
<sir-project-fasetiming [faseTiming]="projectTiming.timingOnderzoek" (faseTimingChanged)="faseTimingChanged($event, 'timingOnderzoek')"></sir-project-fasetiming>

projectTiming在ngOnInit中通过服务获取：

public ngOnInit(): void {
    const self = this;
    this.timingService.resolveTimings().then((projectTiming) => {
        self.projectTiming = projectTiming;
    });
}

当修改timingInitiatie对应的子组件输入时，会触发faseTimingChanged方法，该方法修改projectTiming.timingOnderzoek的属性：

public faseTimingChanged(timing: ProjectFaseTiming, prop: string): void {
    this.projectTiming['timingOnderzoek'].gepland.from = this.tarmaDateService.addDays(this.projectTiming[prop].gepland.to, 1);
}

但绑定projectTiming.timingOnderzoek的子组件UI未显示新赋值的gepland.from值，请问原因是什么？

核心原因 #

Angular的变更检测机制默认依赖对象引用的变化来触发组件更新。你当前仅修改了projectTiming.timingOnderzoek.gepland.from这个嵌套深层属性的值，没有改变projectTiming、timingOnderzoek或gepland的对象引用，Angular无法自动检测到这种内部属性的修改，因此绑定该数据的子组件UI不会更新。

解决方法 #

方法1：重新赋值对象引用（推荐） #

通过创建新的对象副本更新引用，让Angular的变更检测机制感知到数据变化：

public faseTimingChanged(timing: ProjectFaseTiming, prop: string): void {
    // 逐层复制对象，修改目标属性后重新赋值
    const newGepland = {
        ...this.projectTiming['timingOnderzoek'].gepland,
        from: this.tarmaDateService.addDays(this.projectTiming[prop].gepland.to, 1)
    };
    const newTimingOnderzoek = {
        ...this.projectTiming['timingOnderzoek'],
        gepland: newGepland
    };
    this.projectTiming = {
        ...this.projectTiming,
        timingOnderzoek: newTimingOnderzoek
    };
}

方法2：手动触发变更检测 #

注入ChangeDetectorRef服务，在修改属性后手动调用检测方法：

import { ChangeDetectorRef } from '@angular/core';

// 构造函数注入ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef) {}

public faseTimingChanged(timing: ProjectFaseTiming, prop: string): void {
    this.projectTiming['timingOnderzoek'].gepland.from = this.tarmaDateService.addDays(this.projectTiming[prop].gepland.to, 1);
    // 手动触发变更检测，强制更新UI
    this.cdr.detectChanges();
}

方法3：使用可观察对象管理状态 #

将projectTiming包装为BehaviorSubject，子组件订阅该对象的变化，更新数据时发送新值：

import { BehaviorSubject } from 'rxjs';

// 定义可观察对象
private _projectTiming$ = new BehaviorSubject<ProjectTiming>(null);
public projectTiming$ = this._projectTiming$.asObservable();

// ngOnInit中获取数据后发送到Subject
public ngOnInit(): void {
    this.timingService.resolveTimings().then((projectTiming) => {
        this._projectTiming$.next(projectTiming);
    });
}

// 修改属性时发送新的对象副本
public faseTimingChanged(timing: ProjectFaseTiming, prop: string): void {
    const currentTiming = this._projectTiming$.value;
    const newGepland = {
        ...currentTiming['timingOnderzoek'].gepland,
        from: this.tarmaDateService.addDays(currentTiming[prop].gepland.to, 1)
    };
    const newTimingOnderzoek = {
        ...currentTiming['timingOnderzoek'],
        gepland: newGepland
    };
    const newProjectTiming = {
        ...currentTiming,
        timingOnderzoek: newTimingOnderzoek
    };
    this._projectTiming$.next(newProjectTiming);
}

模板中使用async管道订阅：

<sir-project-fasetiming [faseTiming]="(projectTiming$ | async)?.timingInitiatie" (faseTimingChanged)="faseTimingChanged($event, 'timingInitiatie')"></sir-project-fasetiming>
<sir-project-fasetiming [faseTiming]="(projectTiming$ | async)?.timingOnderzoek" (faseTimingChanged)="faseTimingChanged($event, 'timingOnderzoek')"></sir-project-fasetiming>

内容的提问来源于stack exchange，提问作者tompynation