TypeScript material.MatDialog類代碼示例

	private SetupDialog(data,ref:ViewContainerRef, userData:any = null, conf = new MatDialogConfig()) {
		conf.viewContainerRef = ref;
		if(userData)
			conf.data = userData
		var resp = this.mdDialog.open(data,conf);
		return resp.afterClosed();
	}

  showQrCode(event: any, address: string) {
    event.stopPropagation();

    const config = new MatDialogConfig();
    config.data = { address };
    this.dialog.open(QrCodeComponent, config);
  }

describe('MediaWallQueryComponent', () => {
	let component: MediaWallQueryComponent;
	let dialog: MatDialog;
	beforeEach(() => {
		TestBed.configureTestingModule({
			imports: [
				RouterTestingModule,
				BrowserAnimationsModule,
				MatDialogModule,
				MatCheckboxModule,
				StoreModule.provideStore(fromRoot.reducer),
				FormsModule,
				ReactiveFormsModule
			],
			declarations: [
				MediaWallQueryComponent
			]
		});
		TestBed.overrideModule(BrowserDynamicTestingModule, {
		set: {
			entryComponents: [ MediaWallQueryComponent ]
		}
});
	});
	beforeEach(() => {
			dialog = TestBed.get(MatDialog);
			const dialogRef = dialog.open(MediaWallQueryComponent);

			component = dialogRef.componentInstance;
		});

	it('should create an instance', () => {
		expect(component).toBeTruthy();
	});
});

 /**
  * Opens the projection dialog for the given projectable. After the user's choice,
  * the projectors will be updated.
  *
  * @param obj The projectable.
  */
 public async openProjectDialogFor(obj: Projectable | ProjectorElementBuildDeskriptor): Promise<void> {
     let descriptor: ProjectorElementBuildDeskriptor;
     if (isProjectable(obj)) {
         descriptor = obj.getSlide(this.configService);
     } else {
         descriptor = obj;
     }
     const dialogRef = this.dialog.open<
         ProjectionDialogComponent,
         ProjectorElementBuildDeskriptor,
         ProjectionDialogReturnType
     >(ProjectionDialogComponent, {
         maxHeight: '90vh',
         autoFocus: false,
         data: descriptor
     });
     const response = await dialogRef.afterClosed().toPromise();
     if (response) {
         const [action, projectors, projectorElement]: ProjectionDialogReturnType = response;
         if (action === 'project') {
             this.projectorService.projectOnMultiple(projectors, projectorElement);
         } else if (action === 'addToPreview') {
             projectors.forEach(projector => {
                 this.projectorService.addElementToPreview(projector, projectorElement);
             });
         }
     }
 }

 showFileDialog(mediaItem: IMediaItem): void {
   this.dialog.open(MediaShowItemComponent, {
     data: {
       mediaItem
     }
   });
 }

  showRemoveDialog(mediaItem: IMediaItem, mediaGallery: IMediaGallery): void {
    const dialogRef = this.dialog.open(DeleteConfirmDialogComponent, {
      hasBackdrop: true,
      panelClass: 'delete-dialog',
      data: {
        mediaItem: mediaItem,
        mediaGallery: mediaGallery
      }
    });

    dialogRef.afterClosed().subscribe((data: {
      removedMediaItem: IMediaItem,
      deleteFromFS: boolean
    }) => {
      if (data) {

        const tasks: any[] = [];

        if (data.deleteFromFS) {
          tasks.push(this.mediaItemService.removeMediaItem(this.mediaItem.id));
        }

        if (this.mediaGallery) {
          this.mediaGallery.assignedMediaItems.splice(this.mediaGallery.assignedMediaItems.indexOf(this.mediaItem.id), 1);
          tasks.push(this.mediaGalleryService.updateMediaGallery(this.mediaGallery));
        }

        Promise.all(tasks).then(
          () => this.alertService.showSnackBar('success', 'general.media.upload.file.deleted'),
          (error: any) => this.alertService.showSnackBar('error', error.message)
        ).catch((error: any) => this.alertService.showSnackBar('error', error.message));

      }
    });
  }

 delete(char: Character) {
   let dialogRef = this.dialog.open(CharacterDeleteModalComponent, {
     width: '75%',
     disableClose: false,
     data: char
   });
 }

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

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

    // -----------------------------------------------------------------------------------------------------
    // @ Public methods
    // -----------------------------------------------------------------------------------------------------

    /**
     * Compose dialog
     */
    composeDialog(): void
    {
        this.dialogRef = this._matDialog.open(MailComposeDialogComponent, {
            panelClass: 'mail-compose-dialog'
        });
        this.dialogRef.afterClosed()
            .subscribe(response => {
                if ( !response )
                {
                    return;
                }
                const actionType: string = response[0];
                const formData: FormGroup = response[1];
                switch ( actionType )
                {
                    /**
                     * Send
                     */
                    case 'send':
                        console.log('new Mail', formData.getRawValue());
                        break;
                    /**
                     * Delete
                     */
                    case 'delete':
                        console.log('delete Mail');
                        break;
                }
            });
    }

 create() {
   const dialog = this.dialog.open(RoleDialogComponent);
   dialog.componentInstance.initCreate();
   dialog.componentInstance.created.subscribe(createdRole => {
     this.roles.push(createdRole);
   });
 }