点击Angular 4.0+的模态窗口外部不会关闭的实现

目标

请使用Angular 4及以上版本
使用Angular Material

背景资料

在Angular Material的默认设置中，当您点击模态窗口外的区域时，模态窗口会关闭。（当您点击模态窗口外的区域时，窗口会关闭。）由于这一默认设置可能导致用户意外触发行为，因此需要进行实现以防止窗口关闭。

实施

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { DialogComponent } from './dialog/dialog.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
  constructor(
    public dialog: MatDialog
  ){}

  openDialog(){
   const dialogRef = this.dialog.open(DialogComponent, {
     width: '300px',
     height: '200px',
     disableClose: true//これによってモーダルウィンドウ範囲外のところをクリックしても閉じない
   });
  }
}

这是一个 Angular 的示例，你可以访问以下链接查看。