angular material design 弹窗使用

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

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

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

能使用，但是<mat-dialog-content></mat-dialog-content>会报找不到这个组件。

所以重新写一个组件。

在调用的组件

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
<mat-dialog-actions align="center">
  <button mat-stroked-button mat-dialog-close>取消</button>
  <button
    mat-flat-button
    color="primary"
    [mat-dialog-close]="true"
    cdkFocusInitial
  >
    申请
  </button>
</mat-dialog-actions>

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

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