TypeScript MatDialog.open方法代碼示例

  openDialog() {
    const dialogRef = this.dialog.open(DialogContentExampleDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

  openDialog(): void {
    let dialogRef = this.dialog.open(ProjectEditDialogComponent, {
      width: '450px',
      height: '400px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The edit project dialog was closed');
    });
  }

 /**
  * params:
  * - config: IAlertConfig {
  *     message: string;
  *     title?: string;
  *     viewContainerRef?: ViewContainerRef;
  *     closeButton?: string;
  * }
  *
  * Opens an alert dialog with the provided config.
  * Returns an MatDialogRef<TdAlertDialogComponent> object.
  */
 public openAlert(config: IAlertConfig): MatDialogRef<TdAlertDialogComponent> {
   let dialogConfig: MatDialogConfig = this._createConfig(config);
   let dialogRef: MatDialogRef<TdAlertDialogComponent> =
     this._dialogService.open(TdAlertDialogComponent, dialogConfig);
   let alertDialogComponent: TdAlertDialogComponent = dialogRef.componentInstance;
   alertDialogComponent.title = config.title;
   alertDialogComponent.message = config.message;
   if (config.closeButton) {
     alertDialogComponent.closeButton = config.closeButton;
   }
   return dialogRef;
 }

  openVerifyDialog(candidate) {
    const candidateName = `${candidate.rank.abbreviation} ${candidate.lastName}, ${candidate.firstName}`;
    const verified = candidate.record.verified;
    let dialogRef = this.dialog.open(CandidateVerifyDialog, {
      width: '500px',
      data: { candidateName, verified }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        this.changeVerification(candidate);
      }
    });
  }

 /**
  * params:
  * - config: IConfirmConfig {
  *     message: string;
  *     title?: string;
  *     viewContainerRef?: ViewContainerRef;
  *     acceptButton?: string;
  *     cancelButton?: string;
  * }
  *
  * Opens a confirm dialog with the provided config.
  * Returns an MatDialogRef<TdConfirmDialogComponent> object.
  */
 public openConfirm(config: IConfirmConfig): MatDialogRef<TdConfirmDialogComponent> {
   let dialogConfig: MatDialogConfig = this._createConfig(config);
   let dialogRef: MatDialogRef<TdConfirmDialogComponent> =
     this._dialogService.open(TdConfirmDialogComponent, dialogConfig);
   let confirmDialogComponent: TdConfirmDialogComponent = dialogRef.componentInstance;
   confirmDialogComponent.title = config.title;
   confirmDialogComponent.message = config.message;
   if (config.acceptButton) {
     confirmDialogComponent.acceptButton = config.acceptButton;
   }
   if (config.cancelButton) {
     confirmDialogComponent.cancelButton = config.cancelButton;
   }
   return dialogRef;
 }

 /**
  * params:
  * - config: IPromptConfig {
  *     message: string;
  *     title?: string;
  *     value?: string;
  *     viewContainerRef?: ViewContainerRef;
  *     acceptButton?: string;
  *     cancelButton?: string;
  * }
  *
  * Opens a prompt dialog with the provided config.
  * Returns an MatDialogRef<TdPromptDialogComponent> object.
  */
 public openPrompt(config: IPromptConfig): MatDialogRef<TdPromptDialogComponent> {
   let dialogConfig: MatDialogConfig = this._createConfig(config);
   let dialogRef: MatDialogRef<TdPromptDialogComponent> =
     this._dialogService.open(TdPromptDialogComponent, dialogConfig);
   let promptDialogComponent: TdPromptDialogComponent = dialogRef.componentInstance;
   promptDialogComponent.title = config.title;
   promptDialogComponent.message = config.message;
   promptDialogComponent.value = config.value;
   if (config.acceptButton) {
     promptDialogComponent.acceptButton = config.acceptButton;
   }
   if (config.cancelButton) {
     promptDialogComponent.cancelButton = config.cancelButton;
   }
   return dialogRef;
 }

 onRemove(record: Contact) {
   const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
     data: 'Are you sure you want to delete this record?'
   });
   dialogRef.afterClosed().subscribe(result => {
     if (result) {
       this.contactsService
         .remove(record._id)
         .subscribe(
           () => {
             this.refresh();
             this.snackBar.open('Record removed successfully!', 'X', {
               duration: 3000,
               verticalPosition: 'top',
               horizontalPosition: 'center'
             });
           },
           error => this.onError('Error while trying to delete the record.')
         );
     }
   });
 }

 openDialog() {
   this.dialog.open(DialogElementsExampleDialog);
 }

 /**
  * params:
  * - component: ComponentType<T>
  * - config: MatDialogConfig
  * Wrapper function over the open() method in MatDialog.
  * Opens a modal dialog containing the given component.
  */
 public open<T>(component: ComponentType<T>, config?: MatDialogConfig): MatDialogRef<T> {
   return this._dialogService.open(component, config);
 }

 onDetails(record: Contact) {
   this.dialog.open(ContactsDialogComponent, {
     data: record
   });
 }