角度2：防止用戶點擊模式對話框外部

我想阻止用戶點擊模式對話框外部，他只能按下按鈕以退出對話框。我怎樣才能做到這一點？角度2：防止用戶點擊模式對話框外部

dialog.component.ts

ngOnInit() { 

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

}

對話框的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}); 
    } 
}

什麼，我試圖做的是： 對話框的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>

對話框的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; 
}

來源

2017-05-06 Adir Zoari

試聽點擊事件，並防止違約。（點擊）=「outsideClick（$事件）」 – Yeysides

添加演示過的邁克說，

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

LIVE DEMO

來源

2017-05-06 18:49:24 Aravind

您正在使用的材質設計對話框，其中有一個選項中增加的背景下，防止關閉。

我認爲你需要做這樣的事情：

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

來源

2017-05-06 18:15:15

嘿邁克，我不知道它的工作原理。我在我的帖子中添加了我所做的，你能否看到這是否意味着什麼？ –

我添加了您應該添加到對話框模板的HTML。 –

你在哪裏添加？我沒有看到 –

角度2：防止用戶點擊模式對話框外部

回答

相關問題