Angular：父组件连续修改值时变更检测仅触发一次的解决方法

Angular的变更检测机制是在单次事件循环完成后执行批量检测的。你在parentClickEvt这个同步函数里连续修改msg的值，Angular只会捕获到该函数执行完毕后的最终值，因此子组件的ngOnChanges只会触发一次。

方案1：使用setTimeout拆分变更到不同事件循环 #

把每个值的修改放到独立的setTimeout回调中，这样每次修改都会进入新的事件循环，Angular会在每个循环结束后执行变更检测，从而触发ngOnChanges：

// 父组件TS代码修改
export class ParentComponent {
  msg: string = "testing";

  parentWillTakeAction(message) {
    this.messageFromChild = message;
  }

  parentClickEvt() {
    setTimeout(() => this.msg = "Message from parent to child", 0);
    setTimeout(() => this.msg = "India", 0);
    setTimeout(() => this.msg = "India, ASIA", 0);
    setTimeout(() => this.msg = "JAPAN", 0);
    setTimeout(() => this.msg = "JAPAN, ASIA", 0);
  }
}

方案2：手动触发变更检测（结合微任务） #

通过注入ChangeDetectorRef手动触发变更检测，并用Promise.resolve()将每个变更拆分到不同的微任务中，确保每次修改后立即执行检测：

// 父组件TS代码修改
import { ChangeDetectorRef } from '@angular/core';

export class ParentComponent {
  msg: string = "testing";

  constructor(private cdr: ChangeDetectorRef) {}

  parentWillTakeAction(message) {
    this.messageFromChild = message;
  }

  async parentClickEvt() {
    this.msg = "Message from parent to child";
    this.cdr.detectChanges();
    await Promise.resolve();

    this.msg = "India";
    this.cdr.detectChanges();
    await Promise.resolve();

    this.msg = "India, ASIA";
    this.cdr.detectChanges();
    await Promise.resolve();

    this.msg = "JAPAN";
    this.cdr.detectChanges();
    await Promise.resolve();

    this.msg = "JAPAN, ASIA";
    this.cdr.detectChanges();
  }
}

方案3：改用引用类型作为输入属性 #

Angular对引用类型（如对象）的变更检测是基于引用地址的，每次创建新对象都会触发ngOnChanges。可以将字符串包装到对象中：

// 父组件TS代码修改
export class ParentComponent {
  msgObj = { value: "testing" };

  parentWillTakeAction(message) {
    this.messageFromChild = message;
  }

  parentClickEvt() {
    this.msgObj = { value: "Message from parent to child" };
    this.msgObj = { value: "India" };
    this.msgObj = { value: "India, ASIA" };
    this.msgObj = { value: "JAPAN" };
    this.msgObj = { value: "JAPAN, ASIA" };
  }
}

<!-- 父组件HTML修改 -->
<child [message]="msgObj" (informParent)="parentWillTakeAction($event)"></child>

// 子组件TS代码修改
import { SimpleChanges } from '@angular/core';

export class ChildComponent implements OnInit {
  @Input() message: { value: string };
  @Output() informParent = new EventEmitter();

  ngOnChanges(simpleChanges: SimpleChanges) {
    console.log(simpleChanges.message.currentValue.value);
  }
}

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