angular material design 弹窗使用

原理就是用MatDialog写一个弹窗组件，

在要使用弹窗的组件的地方调用那个组件。

在ui文档里 弹窗组件和调用组件是写在一个component.ts里面的

能使用，但是会报找不到这个组件。

所以重新写一个组件。

在调用的组件

0.引入

import { MatDialog } from "@angular/material/dialog";
import { ApplyDialogComponent } from "./components/apply-dialog/apply-dialog.component";

1.构造函数中实列化

  constructor(
    public dialog: MatDialog
  ) {}

2.调用这个对话框

  openDialog() {
    const dialogRef = this.dialog.open(ApplyLacaraDialogComponent);
  }

3.在弹窗关闭时传入一些参数

//弹窗html

  取消
  
    申请
  

4.可以在component.ts中接收参数

  openDialog() {
    const dialogRef = this.dialog.open(ApplyLacaraDialogComponent);
    dialogRef.afterClosed().subscribe((result) => {
      if (result) {
        //你的逻辑
      }
    });
  }