MatDialog -打开传递@Input()的组件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-user-dialog',
  template: `
    <h1>{{title}}</h1>
    <p>{{message}}</p>
  `,
})
export class UserDialogComponent {
  @Input() title: string;
  @Input() message: string;
}

import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { UserDialogComponent } from './user-dialog.component';

@Injectable({
  providedIn: 'root',
})
export class DialogService {
  constructor(private dialog: MatDialog) {}

  openUserDialog(title: string, message: string) {
    const dialogRef = this.dialog.open(UserDialogComponent, {
      data: { title, message },
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('对话框已关闭');
    });
  }
}

import { Component } from '@angular/core';
import { DialogService } from './dialog.service';

@Component({
  selector: 'app-root',
  template: `<button (click)="openDialog()">打开对话框</button>`,
})
export class AppComponent {
  constructor(private dialogService: DialogService) {}

  openDialog() {
    this.dialogService.openUserDialog('欢迎', '这是一个测试对话框');
  }
}