TypeScript MdDialog.open方法代碼示例

 openDialog(cardIndex: number, imgIndex: number, extra?: boolean) {
   if (!extra) {
     this.dialog.open(ImageModalComponent, {
       data: this.cards[cardIndex].content[imgIndex]
     });
   } else {
     this.dialog.open(ImageModalComponent, {
       data: this.cards[cardIndex].extraContent[imgIndex]
     });
   }
 }

 openDialog(component): void {
    let dialogRef = this.dialog.open(component);

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

    public confirm(
      title: string,
      message: string,
      btnOkText: string = 'Продовжити',
      btnCancelText: string = 'Відмінити',
      viewContainerRef?: ViewContainerRef): Observable<boolean> {

        // Docs: https://material.angular.io/components/component/dialog
        // http://www.madhur.co.in/blog/2017/03/26/angular-confirmation-dialog.html

        let dialogRef: MdDialogRef<DialogComponent>;
        const dialogConfig = new MdDialogConfig();
        // FIXME dialogConfig.viewContainerRef = viewContainerRef;

        dialogRef = this.dialog.open(DialogComponent, dialogConfig);

        dialogRef.componentInstance.title = title;
        dialogRef.componentInstance.message = message;
        dialogRef.componentInstance.btnOkText = btnOkText;
        dialogRef.componentInstance.btnCancelText = btnCancelText;

        const result = dialogRef.afterClosed();

        return result;
    }

  approveItem(event, entity: string, entityObject: any, ogKey: string) {
    event.stopPropagation();
    let dialogRef = this.dialog.open(ApproveDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
      if (this.selectedOption === 'approve') {
        if (entityObject.entityKey) {
          let ogEntity = this.db.object('/' + entity + '/' + entityObject.entityKey);
          ogEntity.valueChanges().take(1).subscribe((item:any) => {
            if (entity === 'products' && item.category && entityObject.category) {
              this.db.object('/categories/' + item.category + '/products/' + entityObject.entityKey).remove();
              this.db.object('/categories/' + entityObject.category + '/products/' + entityObject.entityKey).set(Date.now().toString());
            } else if (entity === 'products' && item.category && !entityObject.category) {
              this.db.object('/categories/' + item.category + '/products/' + entityObject.entityKey).remove();
            } else if (entity === 'products' && !item.category && entityObject.category) {
              this.db.object('/categories/' + entityObject.category + '/products/' + entityObject.entityKey).set(Date.now().toString());
            }
            ogEntity.set(entityObject);
          });
        } else {
          this.db.list('/' + entity).push(entityObject).then((item) => {
            if (entity === 'products' && entityObject.category) {
              this.db.object('/categories/' + entityObject.category + '/products/' + item.key).set(Date.now().toString());
            }
          });
        }

        this.db.object('/approvals/' + entity + '/' + ogKey).remove();
        let snackBarRef = this.snackBar.open('Item approved', 'OK!', {
          duration: 3000
        });
      }
    });
  }

    public reviewHistory(): Observable<boolean> {
        let dialogRef: MdDialogRef<ReviewHistoryDialog>;

        dialogRef = this.dialog.open(ReviewHistoryDialog);

        return dialogRef.afterClosed();
    }

    public codepeerRunInfo(): Observable<boolean> {
        let dialogRef: MdDialogRef<CodepeerRunInfoDialog>;

        dialogRef = this.dialog.open(CodepeerRunInfoDialog);

        return dialogRef.afterClosed();
    }

  private _openDialog(config?: MdDialogConfig) {
    this.dialogRef = this._dialog.open(TestDialog, config);

    this.dialogRef.afterClosed().subscribe(() => {
      this.dialogRef = null;
    });
  }

  deleteProduct(product: any) {
    let dialogRef = this.dialog.open(DeleteDialogComponent);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
      if (this.selectedOption === 'delete') {
        this.db.object('/products/' + product.key).remove();
        if (product.category) {
          this.db.object('/categories/' + product.payload.val().category + '/products/' + product.key).remove();
        }

        // if (product.thumbnail) {
        //   let storage = firebase.storage();
        //   let imageRef = storage.refFromURL(product.thumbnail);
        //   let me = this;
        //   imageRef.delete().then(function() {
        //     let snackBarRef = me.snackBar.open('Product deleted', 'OK!', {
        //       duration: 3000
        //     });
        //   }).catch(function(error) {
        //     console.log('error', error);
        //   });
        // } else {
          let snackBarRef = this.snackBar.open('Product deleted', 'OK!', {
            duration: 3000
          });
        // }
      }
    });
  }

    /**
     * General method for performing the given operation (copy|move)
     *
     * @param action the action to perform (copy|move)
     * @param type type of the content (content|folder)
     * @param contentEntry the contentEntry which has to have the action performed on
     * @param permission permission which is needed to apply the action
     */
    private doFileOperation(action: string, type: string, contentEntry: MinimalNodeEntryEntity, permission?: string): Subject<string> {
        const observable: Subject<string> = new Subject<string>();

        if (this.contentService.hasPermission(contentEntry, permission)) {
            const data: ContentNodeSelectorComponentData = {
                title: `${action} ${contentEntry.name} to ...`,
                currentFolderId: contentEntry.parentId,
                rowFilter: this.rowFilter.bind(this, contentEntry.id),
                imageResolver: this.imageResolver.bind(this),
                select: new EventEmitter<MinimalNodeEntryEntity[]>()
            };

            this.dialog.open(ContentNodeSelectorComponent, { data, panelClass: 'adf-content-node-selector-dialog', width: '630px' });

            data.select.subscribe((selections: MinimalNodeEntryEntity[]) => {
                const selection = selections[0];
                this.documentListService[`${action}Node`].call(this.documentListService, contentEntry.id, selection.id)
                    .subscribe(
                        observable.next.bind(observable, `OPERATION.SUCCES.${type.toUpperCase()}.${action.toUpperCase()}`),
                        observable.error.bind(observable)
                    );
                this.dialog.closeAll();
            });

            return observable;
        } else {
            observable.error(new Error(JSON.stringify({ error: { statusCode: 403 } })));
            return observable;
        }
    }

 (response) => {
   this.changeHistoryDialogRef = this.dialog.open(ChangeHistoryComponent, { width: '60%',
     data: {
       title: context.page.title,
       data: response
     }
   });
 }