如何手动触发Angular变更检测？跨组件数组更新DOM不刷新问题

问题场景 #

无父子关系的组件间，从add-sample组件向add-family组件的数组currentFilesRV添加值，返回add-family组件后数组已更新，但DOM未触发刷新。由于组件已加载，ngOnInit不会执行，需实现无需额外组件事件的自动DOM更新。

现有代码 #

add-family组件模板 #

<ng-container *ngFor="let i of currentFilesRV">
  <ion-icon *ngIf="i === control.key" (click)="alreadySubmitted()" class="icon-dyamic" name="checkmark-circle" style="color: green;"></ion-icon>
</ng-container>

add-sample组件调用代码 #

this.addFamilyComponent.currentFamilyFiles(this.relationValue);

add-family组件数组更新方法 #

currentFamilyFiles(relationVal){
  this.zone.run(() => {
    this.currentFilesRV.push(relationVal)
    console.log("RV: ", this.currentFilesRV)
  })
}

解决方案 #

方案1：替换数组引用（最简便） #

Angular的变更检测依赖引用变化，push方法仅修改数组内容，不会改变数组引用，因此检测不到变化。直接创建新数组替换原数组即可触发更新：

currentFamilyFiles(relationVal){
  // 扩展运算符创建新数组，保留原有元素并添加新值
  this.currentFilesRV = [...this.currentFilesRV, relationVal];
  console.log("RV: ", this.currentFilesRV);
}

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

注入ChangeDetectorRef，在数组更新后强制触发变更检测：

1. 注入依赖：

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

constructor(private zone: NgZone, private cdr: ChangeDetectorRef) {}

2. 修改更新方法：

currentFamilyFiles(relationVal){
  this.currentFilesRV.push(relationVal);
  console.log("RV: ", this.currentFilesRV);
  // 手动触发变更检测
  this.cdr.detectChanges();
}

方案3：使用响应式可观察对象（推荐，解耦组件） #

通过共享服务+BehaviorSubject实现组件间数据通信，同时自动触发DOM更新，避免组件直接耦合：

1. 创建共享服务FamilyFileService：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FamilyFileService {
  // 初始化空数组的BehaviorSubject
  private currentFilesRVSrc = new BehaviorSubject<any[]>([]);
  // 对外暴露可观察对象
  currentFilesRV$ = this.currentFilesRVSrc.asObservable();

  addFile(relationVal: any) {
    const currentFiles = this.currentFilesRVSrc.value;
    // 发送新数组引用
    this.currentFilesRVSrc.next([...currentFiles, relationVal]);
  }
}

2. 修改add-family组件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FamilyFileService } from './family-file.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-add-family',
  templateUrl: './add-family.component.html'
})
export class AddFamilyComponent implements OnInit, OnDestroy {
  // 直接使用服务的可观察对象
  currentFilesRV$ = this.familyFileService.currentFilesRV$;
  private subscription: Subscription;

  constructor(private familyFileService: FamilyFileService) {}

  ngOnInit() {
    // 若需本地数组存储，可订阅（使用async管道则无需此步骤）
    this.subscription = this.familyFileService.currentFilesRV$.subscribe(files => {
      this.currentFilesRV = files;
    });
  }

  ngOnDestroy() {
    // 销毁订阅防止内存泄漏
    this.subscription.unsubscribe();
  }

  alreadySubmitted() {
    // 原有方法逻辑
  }
}

3. 修改add-family组件模板（使用async管道自动订阅）：

<ng-container *ngFor="let i of currentFilesRV$ | async">
  <ion-icon *ngIf="i === control.key" (click)="alreadySubmitted()" class="icon-dyamic" name="checkmark-circle" style="color: green;"></ion-icon>
</ng-container>

4. 修改add-sample组件调用逻辑：

import { FamilyFileService } from './family-file.service';

constructor(private familyFileService: FamilyFileService) {}

// 替换原有直接调用组件方法的逻辑
this.familyFileService.addFile(this.relationValue);

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