TypeScript ng-zorro-antd.NzModalService類代碼示例

 constructor(modalSrv: NzModalService) {
   modalSrv.closeAll();
 }

 constructor(private router: Router, modalSrv: NzModalService) {
     modalSrv.closeAll();
 }

 showConfirm(): void {
   this.modalService.confirm({
     nzTitle  : '<i>Do you Want to delete these items?</i>',
     nzContent: '<b>Some descriptions</b>',
     nzOnOk   : () => console.log('OK')
   });
 }

 info(): void {
   this.modalService.info({
     nzTitle: 'This is a notification message',
     nzContent: '<p>some messages...some messages...</p><p>some messages...some messages...</p>',
     nzOnOk: () => console.log('Info OK')
   });
 }

 /**
  * 打開對話框，默認會過濾一些事件的回調，因此更容易處理回調：
  * this.modalHelper.open(FormEditComponent, { i }).subscribe(res => this.load());
  *
  * 對於組件的成功&關閉的處理說明：
  * 成功：
  * this.subject.destroy('onOk');
  *  若需要回調用參數則：
  *  this.subject.next(data);
  *  this.subject.destroy();
  *
  * 關閉：
  * this.subject.destroy();
  *
  * @param {*} comp 組件
  * @param {*} [params] 組件參數
  * @param {('sm' | 'lg' | '' | number)} [size='lg'] 大小；例如：lg、600，默認：lg
  * @param {*} [options] 對話框ConfigInterface參數
  */
 open(comp: any, params?: any, size: 'sm' | 'lg' | '' | number = 'lg', options?: any): Observable<any> {
     let cls = '', width = '';
     if (size) {
         if (typeof size === 'number') {
             width = `${size}px`;
         } else {
             cls = `modal-${size}`;
         }
     }
     return this.modalSrv
         .open(Object.assign({
             wrapClassName: cls,
             content: comp,
             width: width ? width : undefined,
             footer: false,
             componentParams: params
         }, options || {}))
         .pipe(filter((res: any) => {
             let findIdx = -1;
             if (typeof res === 'string') {
                 const resStr = res as string;
                 findIdx = ['onShow', 'onShown', 'onHide', 'onHidden', 'onCancel', 'onDestroy'].findIndex(w => resStr.startsWith(w));
             }
             return findIdx === -1;
         }));
 }

  success(): void {
    const modal = this.modalService.success({
      nzTitle: 'This is a notification message',
      nzContent: 'This modal will be destroyed after 1 second'
    });

    window.setTimeout(() => modal.destroy(), 1000);
  }

 showConfirm(): void {
   this.confirmModal = this.modal.confirm({
     nzTitle: 'Do you Want to delete these items?',
     nzContent: 'When clicked the OK button, this dialog will be closed after 1 second',
     nzOnOk: () => new Promise((resolve, reject) => {
       setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
     }).catch(() => console.log('Oops errors!'))
   });
 }

 catchError((err: HttpResponse<any>, caught: Observable<any>) => { // 返回異常
   if (err.status === 401) {
     this.confirmSrv.warning({
       nzTitle: '提示',
       nzContent: '登錄超時，請重新登錄！',
       nzOnOk: () => { }
     });
   }
   return Observable.create(observer => observer.next(event));
 })

 @HostListener('click')
 _click() {
     this.confirmServ.confirm({
         title: 'Make sure clear all local storage?',
         onOk: () => {
             localStorage.clear();
             this.messageServ.success('Clear Finished!');
         }
     });
 }

 showDeleteConfirm(): void {
   this.modalService.confirm({
     nzTitle     : 'Are you sure delete this task?',
     nzContent   : '<b style="color: red;">Some descriptions</b>',
     nzOkText    : 'Yes',
     nzOkType    : 'danger',
     nzOnOk      : () => console.log('OK'),
     nzCancelText: 'No',
     nzOnCancel  : () => console.log('Cancel')
   });
 }

 public view(profile: Contact) {
     const modal = this.modalService.create({
         nzTitle: null,
         nzFooter: null,
         nzClassName: 'card-modal',
         nzMaskStyle: {backgroundColor: 'transparent'},
         nzContent: ProfileComponent,
         nzComponentParams: {
             profile: profile
         }
     });
 }

 return new Observable((observer) => {
     this.confirmSrv.confirm({
         title: '確認要離開嗎？',
         content: '你已經填寫了部分表單離開會放棄已經填寫的內容。',
         okText: '離開',
         cancelText: '取消',
         onOk: () => {
             observer.next(true);
             observer.complete();
         },
         onCancel: () => {
             observer.next(false);
             observer.complete();
         }
     });
 });

 this.tenantApi.listCurrent().subscribe(tenants => {
     console.log(tenants.data);
     if (tenants.data.length <= 0) {
         this.message.error('未綁定租戶');
         return;
     }
     if (tenants.data.length <= 1) {
         successHandle(tenants.data[0]);
     } else {
         const modal = this.modal.create({
             nzTitle: '選擇公司',
             nzWidth: '521px',
             nzContent: LoginTenantSelectComponent,
             nzComponentParams: {
                 tenants: tenants.data
             },
             nzFooter: null
         });
         modal.afterClose.subscribe((t: Tenant) => {
             successHandle(t);
         });
     }
 });

 warning(): void {
   this.modalService.warning({
     nzTitle: 'This is an warning message',
     nzContent: 'some messages...some messages...'
   });
 }

 error(): void {
   this.modalService.error({
     nzTitle: 'This is an error message',
     nzContent: 'some messages...some messages...'
   });
 }