Angular 14中如何从Material对话框组件调用其他组件的方法

在Angular 14里，完全可以实现对话框组件（componentB）调用父组件（componentA）的方法，以下是三种常用的实现方式：

方式一：利用对话框关闭事件订阅 #

通过订阅对话框的afterClosed()事件，结合关闭时传递的参数触发父组件方法。

修改componentB.dialog代码 #

import { MatDialogRef } from '@angular/material/dialog';

constructor(public dialogRef: MatDialogRef<ComponentB>) {}

public cancel() {
  // 关闭对话框时传递标识参数
  this.dialogRef.close('cancel');
}

修改componentA代码 #

openDialog(): void {
  const dialogRef = this.dialog.open(ComponentB, {
    width: '700px',
  });

  // 订阅对话框关闭事件，根据参数调用目标方法
  dialogRef.afterClosed().subscribe(result => {
    if (result === 'cancel') {
      this.methodToBeCalledFromCompB();
    }
  });
}

methodToBeCalledFromCompB() {
  console.log('test');
}

方式二：向对话框传递回调函数 #

打开对话框时，将父组件的方法作为数据传入对话框，对话框直接调用该回调。

修改componentA代码 #

openDialog(): void {
  const dialogRef = this.dialog.open(ComponentB, {
    width: '700px',
    data: {
      // 绑定this指向，确保回调中this指向componentA
      onCancel: this.methodToBeCalledFromCompB.bind(this)
    }
  });
}

methodToBeCalledFromCompB() {
  console.log('test');
}

修改componentB.dialog代码 #

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Inject } from '@angular/core';

constructor(
  public dialogRef: MatDialogRef<ComponentB>,
  @Inject(MAT_DIALOG_DATA) public data: { onCancel: () => void }
) {}

public cancel() {
  // 调用父组件传递的回调方法
  this.data.onCancel();
  this.dialogRef.close();
}

方式三：使用@Output输出事件 #

在对话框组件中定义@Output事件，父组件打开对话框时监听该事件，触发时执行目标方法。

修改componentB.dialog代码 #

import { MatDialogRef } from '@angular/material/dialog';
import { Output, EventEmitter } from '@angular/core';

@Output() cancelTriggered = new EventEmitter<void>();

constructor(public dialogRef: MatDialogRef<ComponentB>) {}

public cancel() {
  // 发射事件通知父组件
  this.cancelTriggered.emit();
  this.dialogRef.close();
}

修改componentA代码 #

openDialog(): void {
  const dialogRef = this.dialog.open(ComponentB, {
    width: '700px',
  });

  // 获取对话框实例，监听输出事件
  dialogRef.componentInstance.cancelTriggered.subscribe(() => {
    this.methodToBeCalledFromCompB();
  });
}

methodToBeCalledFromCompB() {
  console.log('test');
}

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