Angular完整项目开发10 - 信息提示框（Dialog)

一般的软件应用中都会有一些信息提示框，比如单纯提示一条信息，用户点击确定即可；又比如某些操作之前弹框让用户确认是或否。

利用Angular Material中的Dialog组件，可以制作这些提示框。目前制作了两个：提示框Hint和确认框Prompt。

先说只有一个确定按钮的信息提示框：

1. HTML模板

hint.html

<h2 mat-dialog-title style="font-family: 微软雅黑;">提示</h2>
<mat-dialog-content class="mat-typography">
  <p>
    {{message}}
  </p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>确定</button>
</mat-dialog-actions>

2. 对话框的TS类

hint.ts

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'hint',
  templateUrl: './hint.html',
})
export class Hint  {
  constructor(
    @Inject(MAT_DIALOG_DATA) public message: string
  ) { }
}

3. 在Component中调用提示框

import { Hint } from '../common/dlg/hint';

export class DeviceComponent implements OnInit {
  constructor(
    ...
    public dialog: MatDialog,
  ) { }

  this.dialog.open(Hint, {data:"请选择一条记录！"}); //打开信息提示框
}

效果：

带有Yes or No两个按钮的操作确认框(Prompt)和信息提示框基本一样，就多一个按钮, 可以为每个按钮分别设置Yes or No的属性，Yes就设成true，No就设成false.

<button mat-button [mat-dialog-close]="false">不</button>
<button mat-button [mat-dialog-close]="true" cdkFocusInitial>是的</button>

效果：

4. 使用按钮结果

有时候对于用户按了不同按钮的结果要进行处理，比如按了Yes怎么处理，按了No怎么处理。

const dialogRef = this.dialog.open(Prompt, obj);
dialogRef.afterClosed().subscribe(result => {  //Dialog的afterClosed事件，挺有用
      if(result){
        //Yes...
      }else{
        //No...
      }
});