角度 2：防止用户在模态对话框外单击答案

【问题标题】：angular 2: prevent user to click outside the modal dialog角度 2：防止用户在模态对话框外单击
【发布时间】：2017-10-05 00:48:48
【问题描述】：

我想防止用户在模态对话框之外单击，他只能按下按钮退出对话框。我该怎么做？

dialog.component.ts

ngOnInit() {

const dialogRef = this.dialog.open(DialogResultComponent);
dialogRef.afterClosed().subscribe(result => {
  console.log(result);
});

}

dialog-result.component.ts

    import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { FormGroup,FormControl,Validators,FormBuilder,  } from '@angular/forms';



@Component({
  selector: 'app-dialog-result',
  templateUrl: './dialog-result.component.html',
})

export class DialogResultComponent {


  form: FormGroup;
  name = new FormControl('',Validators.required);
  width = new FormControl('',Validators.required);
  height = new FormControl('',Validators.required);
  constructor(public dialogRef: MdDialogRef<DialogResultComponent>,private fb: FormBuilder) {

  }

  ngOnInit() {
  this.form = this.fb.group({
      'name' :this.name,
      'width':   this.width,
      'height':  this.height,
    });
}

  saveData(){
    console.log(this.name.value);
    this.dialogRef.close({name:this.name.value,width:this.width.value,height:this.height.value});
  }
}

我试图做的是： dialog-result.component.html

       <div>
   <form [formGroup]="form">
     <h3>MineSweeperwix</h3>
      <div class="mdl-dialog__content">
                <p><mdl-textfield type="text" label="name" ([ngModel])="name" floating-label autofocus></mdl-textfield></p>
                <mdl-textfield type="number" formControlName="width"  label="width"   floating-label autofocus></mdl-textfield>
               <mdl-textfield type="number" formControlName="height" label="height" floating-label autofocus  error-msg="'Please provide a correct email!'"></mdl-textfield>
      </div>
      <div class="mdl-dialog__actions">
        <button mdl-button (click)="saveData()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple [disabled]="!form.valid">Save</button>
        <button mdl-button (click)="dialogRef.close(dd)" mdl-button-type="raised" mdl-ripple>Cancel</button>
      </div>
   </form>
   </div>

dialog-result.component.cs

    div.modal-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100; /* less than your dialog but greater than the rest of your app */
    /* optional: */
    background: black;
    opacity: 0.2;
}

【问题讨论】：

尝试监听点击事件并防止默认。 (click)="outsideClick($event)"

标签： css angular modal-dialog angular-material2

【解决方案1】：

例如，您可以在 shared.module 的提供程序中设置参数disableClose:true。然后，你所有的 mat-dialog 都会受到这个参数的影响：

providers: [{     
    provide: 
         MAT_DIALOG_DEFAULT_OPTIONS, 
         useValue: { 
            disableClose: true,
            hasBackdrop: true 
          } 
    }
]

【讨论】：

【解决方案2】：

如 Mike 所说，也添加一个演示，

openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog,{disableClose:true});
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }

LIVE DEMO

【讨论】：

【解决方案3】：

您正在使用 Material Design 对话框，该对话框具有添加背景和防止关闭的选项。

我认为你需要这样做：

this.dialogRef = this.dialog.open(DialogResultComponent, {
    disableClose: true,
    hasBackdrop: true // or false, depending on what you want
});

在https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts 上查看演示。

由于文档尚未准备好，我发现查看源代码中包含的演示应用程序非常宝贵。你可以在本地运行它：

npm run demo-app

【讨论】：

嘿迈克，我不确定它是否有效。我在帖子中添加了我所做的，你能明白你的意思吗？
我添加了您应该添加到对话框模板中的 HTML。
你在哪里添加的？我没看到
再看看。
啊，好吧 - 我刚刚注意到您正在使用 Material Design 对话框。我改变了答案。