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

MatDialog 是 Angular Material 库中的一个组件，用于创建和管理对话框。它允许你在应用程序中显示模态对话框，这些对话框可以包含自定义内容，并且可以接收输入参数。

基础概念

@Input(): 这是一个 Angular 的装饰器，用于标记组件的输入属性。这意味着你可以从父组件向子组件传递数据。
MatDialog: 这是 Angular Material 库中的一个服务，用于打开和管理对话框。

优势

模态对话框: 对话框可以阻止用户与应用程序的其余部分交互，直到对话框关闭。
自定义内容: 可以传递任何组件作为对话框的内容。
输入参数: 可以通过 @Input() 传递数据到对话框组件。

类型

简单对话框: 只包含基本文本和按钮。
复杂对话框: 包含表单、列表或其他复杂组件。

应用场景

确认对话框: 在执行重要操作前请求用户确认。
设置对话框: 允许用户配置应用程序的某些设置。
信息对话框: 显示重要信息或通知。

示例代码

假设我们有一个 UserDialogComponent，我们想要通过 MatDialog 打开它，并传递一些数据。

UserDialogComponent.ts

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('欢迎', '这是一个测试对话框');
  }
}