Angular中已打开的MatDialog弹窗如何监听变量变化控制按钮显隐？

问题根源：布尔值属于基础数据类型，通过MatDialogConfig.data传递时只会传值拷贝，父组件后续修改原变量不会同步到弹窗组件内部。另外你调用dialog.open时第一个参数建议传入组件类而非字符串，避免运行时报错。

方案1：通过RxJS可观察对象传值（推荐，兼容Angular 9.x） #

是Angular生态最常用的状态同步方案，无额外监听成本。

• 父组件代码调整
  导入依赖：

  import { BehaviorSubject } from 'rxjs';
  

  替换原isTrue变量定义为可观察对象：

  // 初始值为false
  isTrue$ = new BehaviorSubject<boolean>(false);
  

  API列表全部加载完成时触发值更新：

  // 写在你的API加载完成的逻辑块内
  this.isTrue$.next(true);
  

  打开弹窗时传递可观察对象：

  const dialogConfig = new MatDialogConfig();
  // 传可观察对象而非基础值
  dialogConfig.data = { isTrue$: this.isTrue$ };
  this.dialogRef = this.dialog.open(LoaderComponent, dialogConfig);
  

• 弹窗组件（LoaderComponent）代码调整
  ts逻辑：

  import { Component, Inject, OnDestroy } from '@angular/core';
  import { MAT_DIALOG_DATA } from '@angular/material/dialog';
  import { Subscription } from 'rxjs';
  
  @Component({
    // 你的原有组件配置
  })
  export class LoaderComponent implements OnDestroy {
    showCloseBtn = false;
    private sub: Subscription;
  
    constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
      // 订阅状态变化
      this.sub = this.data.isTrue$.subscribe(status => {
        this.showCloseBtn = status;
      })
    }
  
    // 销毁时取消订阅避免内存泄漏
    ngOnDestroy() {
      this.sub.unsubscribe();
    }
  }
  

  模板控制关闭按钮显示：

  <button mat-button *ngIf="showCloseBtn" mat-dialog-close>退出</button>
  

方案2：直接更新弹窗组件实例属性 #

如果不想引入RxJS，可以直接操作弹窗实例同步状态

• 父组件调整
  打开弹窗时传递对象类型的data：

  const dialogConfig = new MatDialogConfig();
  // 用对象包裹属性，后续可修改引用内的属性值
  dialogConfig.data = { isTrue: false };
  this.dialogRef = this.dialog.open(LoaderComponent, dialogConfig);
  

  API加载完成时同步更新弹窗内的状态：

  // 写在你的API加载完成的逻辑块内
  this.isTrue = true;
  this.dialogRef.componentInstance.data.isTrue = this.isTrue;
  

• 弹窗组件调整
  实现OnChanges钩子监听data变化：

  import { Component, Inject, OnChanges, SimpleChanges } from '@angular/core';
  import { MAT_DIALOG_DATA } from '@angular/material/dialog';
  
  @Component({
    // 你的原有组件配置
  })
  export class LoaderComponent implements OnChanges {
    showCloseBtn = false;
  
    constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
  
    ngOnChanges(changes: SimpleChanges) {
      if (changes.data?.currentValue?.isTrue !== undefined) {
        this.showCloseBtn = changes.data.currentValue.isTrue;
      }
    }
  }
  

  模板控制逻辑和方案1完全一致。

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