5.ng-zorro项目弹窗

弹窗

在项目中会使用到弹窗，大致分成

- 仅提示的弹窗
- 带模板的弹窗

弹窗直接使用nz-modal对话框，将NzModalModule注入shared模块

shared.module.ts

import { NzModalModule } from 'ng-zorro-antd/modal';
const NGZORROMODULE = [
  ...
  NzModalModule,
];

仅提示的弹窗

对于仅提示的弹窗，直接调用nz-modal中的NzModalService.confirm() 即可。

user-list.component.ts

constructor(private modal: NzModalService){}

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

带模板的弹窗

私有弹窗

如果弹窗仅是当前模块使用，可以直接写在对应html中，然后在ts中处理显示和隐藏。

user-list.component.html

<button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
<nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <p>Content one</p>
  <p>Content two</p>
  <p>Content three</p>
  <p>Content three</p>
</nz-modal>

user-list.component.ts

isVisible = false;
  
showModal(): void {
    this.isVisible = true;
}

handleOk(): void {
    console.log('Button ok clicked!');
    this.isVisible = false;
}

handleCancel(): void {
    console.log('Button cancel clicked!');
    this.isVisible = false;
}

当然有多个弹窗的时候，会有多个变量和方法，看起来很不友好，可以考虑将弹窗提成单独组件，然后NzModalService.create()创建弹窗。

创建user-info-template弹窗模板

ng g c user-info-template

创建完成后

user-list.component.ts

import { UserInfoTemplateComponent } from '../user-info-template/user-info-template.component';

this.modal.create({
  nzTitle: '用户管理',
  nzContent: UserInfoTemplateComponent,
  nzComponentParams: {
    data: '这是传入的参数'
  },
  nzOnOk: e => new Promise(resolve => {
    console.warn(e,resolve);
  })
});

可以直接将user-info-template组件展示在弹窗中。

注意：对于user-info-template弹窗组件是否要注入到user.module.ts中，只需要看user-info-template组件对应的页面中有没有需要初始化的标签（angular标签或者zorro中的标签），有的话需要注入，不然报对应页面标签错误。

对于调用后的参数传递，通过nzComponentParams属性，里面每个属性对面需要用@input()接受，页面展示data，即可展示：'这是传入的参数'

user-info-template.component.ts

@Input() data;

user-info-template.component.html

{{ data }}

公共组件

公共组件需要配置在shared模块中，方便所有模块调用，例如pdf预览页面，在shared/components中执行

ng g c pdf-dialog

生成pdf组件后，修改组件

pdf-dialog.component.ts

@Input() pdfUrl

pdf-dialog.component.html

<iframe *ngIf="pdfUrl" width="100%" height="100%" [src]="pdfUrl" frameborder="0"></iframe>

修改完成后，在对应模块中调用即可。

pdf组件需要大屏展示，需要特殊样式处理，可以提出新的服务来优化样式。

在shared/services中执行

ng g s dialog

生成完成后修改组件，把有关弹窗的方法都写入dialog组件中，可以统一样式和文本描述。

dialog.service.ts

import { Injectable } from '@angular/core';
import { PdfDialogComponent } from '@shared/components/pdf-dialog/pdf-dialog.component';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';


interface IOptions {
    title?: string;         // 标题名称
    component?: any;        // 组件名称
    content?: string;       // 展示的信息
    params?: object;        // 组件时需要传入的参数，对面需要用@Input接受
    style?: object;         // 悬浮层样式
    bodyStyle?: any;        // Modal body样式
    okText?: string;        // 确定按钮样式
    cancelText?: string;    // 取消按钮样式
    callback?: any;         // 点击确定后回调函数
    cancelCallback?: any;   // 点击取消后回调函数
    footer?: any;           // 底部内容，设置为null时不展示底部
}

@Injectable()
export class DialogService {
    constructor(
        private modal: NzModalService,
        private message: NzMessageService
    ) { }

    // 打开component的弹窗
    createComponentModal(options: IOptions): void {
        options = options || {};
        this.modal.create({
            nzTitle: options.title || '',
            nzContent: options.component || '',
            // nzViewContainerRef: options.viewContainerRef,
            nzComponentParams: options.params || {},
            nzStyle: options.style || {},
            nzBodyStyle: options.bodyStyle || {},
            nzFooter: options.footer,
            nzOkText: options.okText || '确定',
            nzCancelText: options.cancelText || '取消',
            nzMaskClosable: false,
            nzOnOk: (e) => {
                options.cancelText && options.callback(e);
            }
        });
    }

    // pdf弹窗
    pdfShow(pdfUrl:string): void {
        this.createComponentModal({
            component: PdfDialogComponent,
            style: { top: '0px', width: '920px' },
            bodyStyle: { height: 'calc(100vh-25px)', overflow: 'hidden' },
            footer: null,
            params: { pdfUrl }
        });
    }

    // 确认取消弹窗
    caonfirmShow(options: IOptions): void {
        options = options || {};
        this.modal.confirm({
            nzTitle: options.title || '',
            nzContent: options.content || '',
            nzOkText: options.okText || '确定',
            nzCancelText: options.cancelText || '取消',
            nzOnOk: () => {
                options.callback && options.callback();
            }
        });
    }

    // 添加promise的确认取消弹窗
    promiseConfirmShow(options: IOptions): Promise<boolean> {
        options = options || {};
        return new Promise(resolve => {
            this.modal.confirm({
                nzTitle: options.title || '',
                nzContent: options.content || '',
                nzOkText: options.okText || '确定',
                nzCancelText: options.cancelText || '取消',
                nzOnOk: () => {
                    options.callback && options.callback(() => resolve(true));
                },
                nzOnCancel: () => {
                    options.cancelCallback && options.cancelCallback();
                    resolve(true);
                }
            });
        });
    }

    // 消息弹窗
    messageShow(options): void {
        options = options || {};
        this.message.create(options.type || 'info', options.msg || '');
    }
}