Angular中关闭子弹窗时如何重新加载父页面更新数据

父组件的电影列表仅在ngOnInit生命周期初始化时请求了一次接口，弹窗完成新增操作关闭后，没有触发列表重拉逻辑，因此视图不会更新新增内容。

按改造成本从低到高提供两种可落地方案：

方案1：监听弹窗关闭事件触发列表重拉（改造成本最低，兼容所有弹窗库） #

不管使用Angular Material、NG-ZORRO还是ng-bootstrap的弹窗组件，都提供了弹窗关闭后的回调事件，在回调中判断用户是否完成了新增操作，是则重拉电影列表即可。
以最常用的Angular Material MatDialog为例：

• 父组件打开弹窗时，订阅弹窗引用的afterClosed事件
• 弹窗内保存成功后，关闭时传入操作成功的标记，避免取消关闭时触发无效请求

父组件代码：

// movies.component.ts
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MovieService } from './movie.service';
import { AddMovieComponent } from './add-movie/add-movie.component';

@Component({
  selector: 'app-movies',
  templateUrl: './movies.component.html'
})
export class MoviesComponent implements OnInit {
  movieList: Array<{id: number, name: string}> = [];

  constructor(
    private dialog: MatDialog,
    private movieService: MovieService
  ) {}

  ngOnInit(): void {
    this.fetchMovieList();
  }

  // 抽离拉取列表的公共方法，初始化和更新时复用
  fetchMovieList(): void {
    this.movieService.getMovieList().subscribe(res => {
      this.movieList = res;
    });
  }

  onAddMovieClick(): void {
    const dialogRef = this.dialog.open(AddMovieComponent, {
      width: '500px'
    });

    // 监听弹窗关闭
    dialogRef.afterClosed().subscribe(hasSubmitted => {
      // 仅在用户提交成功时重拉列表
      if (hasSubmitted) {
        this.fetchMovieList();
      }
    });
  }
}

弹窗组件代码：

// add-movie.component.ts
import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { MovieService } from '../movie.service';

@Component({
  selector: 'app-add-movie',
  templateUrl: './add-movie.component.html'
})
export class AddMovieComponent {
  constructor(
    private dialogRef: MatDialogRef<AddMovieComponent>,
    private movieService: MovieService
  ) {}

  onSave(formValue: {name: string}): void {
    this.movieService.addMovie(formValue).subscribe(() => {
      // 保存成功，关闭时传true通知父组件刷新
      this.dialogRef.close(true);
    });
  }

  onCancel(): void {
    // 取消/关闭时传false，不触发刷新
    this.dialogRef.close(false);
  }
}

如果使用其他弹窗库，逻辑完全一致，仅API名称有细微差别：

• NG-ZORRO NzModal：订阅afterClose事件
• ng-bootstrap NgbModal：订阅closed事件

方案2：基于服务的响应式状态同步（无额外接口请求，体验更好） #

通过RxJS的BehaviorSubject在服务中维护响应式的电影列表，新增成功后直接在服务内更新列表数据，父组件订阅该数据流即可自动同步视图，无需监听弹窗事件。
服务层代码：

// movie.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable, tap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MovieService {
  private readonly movieList$$ = new BehaviorSubject<Array<{id: number, name: string}>>([]);
  public readonly movieList$ = this.movieList$$.asObservable();

  constructor(private http: HttpClient) {
    // 服务初始化时拉取一次全量列表
    this.loadInitialList();
  }

  private loadInitialList(): void {
    this.http.get<Array<{id: number, name: string}>>('/api/movies')
      .subscribe(list => this.movieList$$.next(list));
  }

  getMovieList(): Observable<Array<{id: number, name: string}>> {
    return this.movieList$;
  }

  addMovie(movieInfo: {name: string}): Observable<{id: number, name: string}> {
    return this.http.post<{id: number, name: string}>('/api/movies', movieInfo)
      .pipe(
        tap(newMovie => {
          // 新增成功后直接将新数据拼入现有列表，推送更新
          const currentList = this.movieList$$.value;
          this.movieList$$.next([...currentList, newMovie]);
        })
      );
  }
}

父组件改造后无需主动维护列表变量，直接通过async管道订阅服务流即可：

// movies.component.ts
import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MovieService } from './movie.service';
import { AddMovieComponent } from './add-movie/add-movie.component';

@Component({
  selector: 'app-movies',
  template: `
    <button (click)="onAddMovieClick()">add movies</button>
    <div *ngFor="let movie of movieList$ | async">
      {{ movie.name }}
    </div>
  `
})
export class MoviesComponent {
  movieList$ = this.movieService.movieList$;

  constructor(
    private dialog: MatDialog,
    private movieService: MovieService
  ) {}

  onAddMovieClick(): void {
    // 仅需打开弹窗，无需监听关闭事件
    this.dialog.open(AddMovieComponent, {width: '500px'});
  }
}

• 不要用window.location.reload()强制刷新整个页面，会破坏单页应用体验，加载慢且页面状态会丢失。
• 方案1适合快速修复存量项目，改造成本极低；方案2适合新项目，减少冗余接口请求，交互更流畅。
• 务必在弹窗关闭回调中加提交状态判断，用户点蒙层、取消按钮关闭弹窗时不要触发无效的列表请求。

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