abp & ng-alain 改造前端五 —— 动态弹

2018-06-22 本文已影响80人诸葛_小亮

介绍

ABP 是 ASP.NET Boilerplate Project(Asp.net 样板项目)的简称，网址:http://aspnetboilerplate.com/。
ng-alain 是基于 antd 中后台前端解决方案,网址:https://ng-alain.com/。
官方网页下载的项目的angular项目是基于(AdminBSB:https://github.com/gurayyarar/AdminBSBMaterialDesign)

目的

一般情况下，弹出框的使用案例是这样的

 <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
      <p>Content one</p>
      <p>Content two</p>
      <p>Content three</p>
    </nz-modal>

效果如下

弹出框

通过控制变量 isVisible 来显示或隐藏弹出框。

如果在页面上动态展示弹出框呢？只要传入弹出框组件即可，不在父页面上显示弹出框组件。
答案是借助NzModalService的create方法，官方说明如下图

官方

AppModalService

编写弹出框服务类，封装弹出组件和参数对象，代码如下

import { Injectable, Type } from '@angular/core';

import { NzModalService } from 'ng-zorro-antd';

/**
 * 弹出框服务
 */
@Injectable()
export class AppModalService {
  constructor(private _modalService: NzModalService) {}

  /**
   * 显示弹出框
   * @param content 弹出框内容，可以是文本或组件
   * @param componentParams 弹出框参数，一般是json对象
   */
  show(content: string | Type<any>, componentParams?: object) {
    const options = {
      nzContent: content,
      nzFooter: null,
      nzComponentParams: componentParams,
    };

    const modal = this._modalService.create(options);

    return modal.afterClose;
  }
}

在模块中注册改服务类