Angular嵌套子组件内部状态变更后视图未刷新问题求助

1. 事件冒泡触发父组件意外重绘：子组件内的点击事件未阻止冒泡，点击后会向上触发父组件.grid-column节点绑定的createNote方法，导致grid$异步流更新返回新的数组/元素引用。Angular默认*ngFor会通过全等比较判断是否需要重绘DOM，数据引用变化后旧的app-note组件会被销毁重建，你修改的内部状态在新实例中仍为默认值，因此看起来视图未同步更新。
2. *ngFor缺少trackBy配置：未指定trackBy时，只要数组引用或数组内元素引用变化，*ngFor就会销毁重建所有关联DOM节点，即使没有事件冒泡，grid$的任何更新都会导致子组件状态被重置。
3. 模板语法错误：子组件输入框绑定的(onBlur)是错误写法，Angular标准事件绑定为(blur)，导致输入框失焦时无法触发editContent(false)逻辑。
4. 可选：祖先组件开启OnPush变更检测：如果父组件或更高层级的祖先组件设置了ChangeDetectionStrategy.OnPush，未满足变更检测触发条件时，子组件的局部状态更新也可能不会触发视图刷新。

按优先级执行以下操作即可解决：

• 阻止子组件点击事件冒泡，避免触发父级的createNote逻辑，修改子组件模板如下：

<div class="note">
    <div (click)="editTitle(true); $event.stopPropagation()" class="header">
        <span [class.hidden]="titleEditable">{{title}}</span>
        <input [class.hidden]="!titleEditable" [value]="title" />
    </div>
    <div (click)="editContent(true); $event.stopPropagation()" class="body">
        <span *ngIf="!contentEditable">{{content}}</span>
        <input *ngIf="contentEditable" (blur)="editContent(false)" [value]="content" />
    </div>
</div>

• 给父组件的*ngFor添加trackBy函数，复用组件实例避免不必要的销毁重建：
  首先在父组件TS文件中添加两个trackBy方法：

// 行级trackBy，有唯一业务ID优先用业务ID，没有可先用索引
trackByRow(index: number, row: any) {
  return index;
}
// 列级trackBy
trackByColumn(index: number, column: any) {
  return column.id ?? index;
}

然后修改父组件模板的*ngFor配置：

<div class="grid-row" *ngFor="let row of (grid$ | async); let rowIndex = index; trackBy: trackByRow">
    <div (click)="createNote(rowIndex, columnIndex)" class="grid-column" *ngFor="let column of row; let columnIndex = index; trackBy: trackByColumn">
        <app-note [title]="column.title" [content]="column.content" *ngIf="column"></app-note>
    </div>
</div>

• 如果确认祖先组件使用了OnPush变更检测策略，可以在子组件修改状态后调用ChangeDetectorRef的markForCheck()方法标记视图需要更新：

editTitle(edit: boolean) {
  this.titleEditable = edit;
  this.changeRef.markForCheck();
}

editContent(edit: boolean) {
  this.contentEditable = edit;
  this.changeRef.markForCheck();
}

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