angular 对话框 material design dialog 弹窗使用

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

在要使用弹窗的组件的地方调用写好的弹窗组件。

在ui文档里 弹窗组件和调用弹窗的组件是写在一个component.ts里面的，能使用，但是<mat-dialog-content></mat-dialog-content>会报找不到这个组件。

所以我将两个组件放在不同的component.ts里

1.调用的组件：

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);
  }

2.弹窗组件：

0.就像普通组件一样写一个弹窗组件

1.html:

在关闭对话框组件时传入一些参数

//弹窗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>

2.在调用组件的component.ts中接收参数

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

3.打开对话框时 给对话框组件 传参：

1.调用对话框的组件

data: { defaultCoordinate}就是你要传的参

  openDialog(defaultCoordinate:number[]){
    const dialogRef = this.dialog.open(ObtainCoordinateDialogComponent,
      {//给对话框组件传参
      data: { defaultCoordinate}
    });
  }

在关闭弹窗时，从关闭的弹窗拿到一些数据

const dialogRef = this.dialog.open(ChainStoreDetailDialog, {
      width: '600px',
      data: detail
    });
    dialogRef.afterClosed().subscribe((result) => {});

 

2.对话框组件中：
        a.引入MAT_DIALOG_DATA 和Inject 

import { Component, OnInit, Input, Inject } from "@angular/core";
import { MAT_DIALOG_DATA } from "@angular/material/dialog";

        b.在构造函数中实例化MAT_DIALOG_DATA

constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}

        c.使用传进来的data

  showData() {
    console.log("data: ", this.data);
  }
  ngOnInit(): void {
    this.showData();
  }

        d.关闭弹窗时传出什么

import { MatDialogRef,MAT_DIALOG_DATA } from "@angular/material/dialog";
  constructor(
    public dialogRef: MatDialogRef<EditCofigItemDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
 
  ) {}

      this.dialogRef.close(false); // 用户点击取消时传递 false

4.弹窗组件 配置 宽，自动聚焦等属性 ,关闭自动聚焦

    const dialogRef = this.dialog.open(InfoDialogComponent,{
      width:"656px",//设置宽度
      autoFocus:false,//关闭自动聚焦
      disableClose: true, // 禁止点击黑色遮罩层关闭弹窗
      data:{

      }
    });