TypeScript MatDialog.open方法代码示例

    editCourse({description, longDescription, category}:Course) {

        const dialogConfig = new MatDialogConfig();

        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;

        dialogConfig.data = {
            description, longDescription, category
        };

        const dialogRef = this.dialog.open(CourseDialogComponent,
            dialogConfig);


        dialogRef.afterClosed().subscribe(
            val => console.log("Dialog output:", val)
        );

    }

 public onCreateClientClicked(): void {
   let creationDialog = this.dialog.open(ClientCreationDialog);
   creationDialog
     .afterClosed()
     .subscribe(dialogResult => {
       if (!dialogResult) {
         return;
       }
   
       let creationResult = dialogResult.Result as ClientCreationResult;
       if (creationResult != ClientCreationResult.Success) {
         return;
       }
   
       let createdClient = dialogResult.client as Client;
       this.snackbar.open(`'${createdClient.name}' was created successfully`, "OK", {
         duration: 5000
       });
       this.clients.unshift(createdClient);
     });
 }

    public verifyAction(confirmation: ConfirmSettings): Observable<ConfirmResponseTypes> {
        let result = new Subject<ConfirmResponseTypes>();

        confirmation.confirmText = confirmation.confirmText || "OK"
        confirmation.cancelText = confirmation.cancelText || "Cancel";

        let settings = {
            width: '500px',
            disableClose: true,
            hasBackdrop: true,
            data: confirmation
          };

        this.dialog.open(VerifyActionComponent, settings)
            .afterClosed().subscribe(response => {
                
                result.next(response);
        });

        return result.asObservable();
    }

 /**
  * Opens the dialog. Returns the chosen value after the user accepts.
  * @param title The title to display in the dialog
  * @param choices The available choices
  * @param multiSelect turn on the option to select multiple entries.
  *  The answer.items will then be an array.
  * @param actions optional strings for buttons replacing the regular confirmation.
  * The answer.action will reflect the button selected
  * @param clearChoice A string for an extra, visually slightly separated
  * choice for 'explicitly set an empty selection'. The answer's action may
  * have this string's value
  * @returns an answer {@link ChoiceAnswer}
  */
 public async open(
     title: string,
     choices: ChoiceDialogOptions,
     multiSelect: boolean = false,
     actions?: string[],
     clearChoice?: string
 ): Promise<ChoiceAnswer> {
     const dialogRef = this.dialog.open(ChoiceDialogComponent, {
         minWidth: '250px',
         maxHeight: '90vh',
         disableClose: true,
         data: {
             title: title,
             choices: choices,
             multiSelect: multiSelect,
             actionButtons: actions,
             clearChoice: clearChoice
         }
     });
     return dialogRef.afterClosed().toPromise();
 }

 public onCreatePolicyClicked(): void {
   let creationDialog = this.dialog.open(PolicyCreationDialog);
   creationDialog
     .afterClosed()
     .subscribe(dialogResult => {
       if (!dialogResult) {
         return;
       }
   
       let creationResult = dialogResult.result as PolicyCreationResult;
       if (creationResult != PolicyCreationResult.Success) {
         return;
       }
   
       let createdPolicy = dialogResult.policy as Policy;
       this.snackbar.open(`"${createdPolicy.name}" was created successfully`, "OK", {
         duration: 5000
       });
       this.policies.unshift(createdPolicy);
     });
 }

  openDialog(offre, id) {
  
    const dialogRef = this.dialog.open(DialogComponent, {
      //height: '350px',
      width: '400px'
    });

/*
    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.apiService.postOffre(offre, id)
          .subscribe(res => {
            this.maj();
          }, (err) => {
            console.log(err);
          });
        
      //} else {
        //console.log("Envoie refusĂŠ.");
      //}
    });*/
  }

 dropFiles(): Observable<DropFilesAction> {
   return this.dialog.open(DropFilesDialogComponent, new MatDialogConfig()).afterClosed();
 }

 confirm(title: string, message: string): Observable<boolean> {
   const config = new MatDialogConfig();
   config.data = { title, message };
   return this.dialog.open(ConfirmDialogComponent, config).afterClosed();
 }

 pickDemo(): Observable<DemoInfo> {
   return this.dialog.open(DemoDialogComponent, new MatDialogConfig()).afterClosed();
 }

 /**
  * Open change password modal
  */
 openModal(id: string): void {
     let dialogRef = this.dialog.open(ModalChangePasswordComponent, {
         data: {}
     });
 }