Angular技术问题：模态框选数据后如何更新Display组件

问题背景 #

我有一个父组件包含两个子组件：Child0和Display。Child0里的按钮点击后会打开模态框，用户可以勾选列表项选择数据；Display组件负责展示选中的数据。目前的问题是：Display组件在ngOnInit中获取选中数据时是空的（因为用户还没操作），而且后续用户选择数据后，Display组件不会自动更新。

我的现有代码如下：

主App组件模板 #

<div class="row">
  <child0-app (onSelectedData)="getSelectedData($event)" [dataForm]="dataForm"></child0-app>
</div>
<div class="row">
  <app-display></app-display>
</div>

原Service代码 #

public getSelectedData() { return this.selectedData; }
public setSelectedData(selectedData: any[]) { this.selectedData = selectedData; }

GridComponent（模态框内的网格组件） #

getCheckedItemList() {
  this.checkedList = [];
  for (let i = 0; i < this.data.length; i++) {
    if (this.data[i].isSelected) {
      this.checkedList.push(this.data[i].Name);
    }
  }
  this.appService.setSelectedData(this.checkedList);
}

原DisplayComponent代码 #

constructor(private service: AppService) {
  this.selectedData = this.service.getSelectedData();
}

问题原因 #

你现在用的是普通变量存储选中数据，当数据变化时，Service不会主动通知Display组件，而Display组件只在初始化时获取了一次数据，所以后续数据更新后组件不会刷新。

解决方案：用Observable实现响应式数据推送 #

我们可以用Angular的BehaviorSubject（属于RxJS）来存储选中数据，它能在数据变化时自动通知所有订阅的组件，而且新订阅的组件能立即拿到当前的最新值。

1. 修改Service，使用BehaviorSubject #

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

@Injectable({ providedIn: 'root' })
export class AppService {
  // 初始化一个空数组作为默认值
  private selectedDataSubject = new BehaviorSubject<any[]>([]);
  // 对外暴露Observable，防止外部直接修改Subject
  public selectedDataObservable: Observable<any[]> = this.selectedDataSubject.asObservable();

  // 获取当前选中数据（可选，如果你需要同步获取的话）
  public getSelectedData(): any[] {
    return this.selectedDataSubject.value;
  }

  // 更新选中数据，通过next()推送新值
  public setSelectedData(selectedData: any[]): void {
    this.selectedDataSubject.next(selectedData);
  }
}

2. 修改GridComponent的代码（无需大改） #

原来的getCheckedItemList方法保持不变，因为我们已经修改了setSelectedData内部的逻辑，它会自动推送新数据：

getCheckedItemList() {
  this.checkedList = [];
  for (let i = 0; i < this.data.length; i++) {
    if (this.data[i].isSelected) {
      this.checkedList.push(this.data[i].Name);
    }
  }
  this.appService.setSelectedData(this.checkedList);
}

3. 修改DisplayComponent，订阅数据变化 #

在ngOnInit中订阅Service的selectedDataObservable，当数据变化时更新组件内的变量，记得在组件销毁时取消订阅：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { AppService } from './app.service';

@Component({
  selector: 'app-display',
  template: `<div>选中的数据：{{ selectedData.join(', ') }}</div>`
})
export class DisplayComponent implements OnInit, OnDestroy {
  selectedData: any[] = [];
  private subscription: Subscription = new Subscription();

  constructor(private service: AppService) {}

  ngOnInit(): void {
    // 订阅数据变化
    this.subscription.add(
      this.service.selectedDataObservable.subscribe(selectedData => {
        this.selectedData = selectedData;
        console.log('更新后的选中数据：', selectedData);
      })
    );
  }

  ngOnDestroy(): void {
    // 取消订阅，防止内存泄漏
    this.subscription.unsubscribe();
  }
}

简化方案：使用async管道（无需手动取消订阅） #

如果你不想手动管理订阅，可以用Angular的async管道，它会自动处理订阅和取消订阅：

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
  selector: 'app-display',
  template: `<div>选中的数据：{{ (service.selectedDataObservable | async)?.join(', ') }}</div>`
})
export class DisplayComponent {
  constructor(public service: AppService) {}
}

你的解决方案验证 #

你后来补充的订阅代码是完全正确的，这样就能在数据变化时自动更新Display组件了，记得在ngOnDestroy取消订阅避免内存泄漏。

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