kąt 2: uniemożliwić użytkownikowi kliknięcie poza modalnym dialogiem

Question

Chcę uniemożliwić użytkownikowi kliknięcie poza modalnym dialogiem, a on może nacisnąć przycisk, aby wyjść z okna dialogowego. jak mogę to zrobić?

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

co starałem się zrobić to: 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; 
} 

Answer 1

Dodanie zbyt demo jak Mike powiedział

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

LIVE DEMO

Answer 2

Używasz okno Materiał konstrukcji, która ma opcję, aby dodać tło i zapobiec zamykaniu.

myślę, że trzeba zrobić coś takiego:

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

Zobacz demo na https://github.com/angular/material2/blob/master/src/demo-app/dialog/dialog-demo.ts.

Ponieważ dokumentacja nie jest jeszcze gotowa, uważam za nieocenione spojrzenie na ich wersję demonstracyjną, która jest zawarta w źródle. Można go uruchomić lokalnie:

npm run demo-app