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

---

介绍

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

1. 目录:https://www.jianshu.com/p/589af988637c
2. 源代码:https://github.com/ZhaoRd/abp-alain

---

目的

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

 <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;
  }
}

在模块中注册改服务类

注册服务类

---

使用方式

1. 在Module中注册弹出框类，必须在entryComponents注册，否则将不能打开弹出框，如下图
   

   模块中注册

2. 在需要弹出框的页面构造函数，注入AppModalService类
   

   构造函数

3. 调用服务类的show方法，传入弹出框组件类
   

   调用
   通过subscribe方法接收返回数据

4. 弹出框传入参数
   在弹出框中，需要对参数进行@Input注解，如下图代码

参数注解

传入参数的时候，只需将参数用json对象格式传入即可，见下图代码

传入参数

---

运行效果

无参数

无参数

有参数

---

总结

通过使用NzModalService，我们能够将弹出框进行动态显示，无需再父界面先声明组件，通过变量来控制弹出框是否显示，
对于弹出框这个功能来说，是灵活方便的。

---

我的公众号

我的公众号

---

源代码

源代码:https://github.com/ZhaoRd/abp-alain