介绍
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;
}
}
在模块中注册改服务类

使用方式
-
在Module中注册弹出框类,必须在
entryComponents
注册,否则将不能打开弹出框,如下图
模块中注册
-
在需要弹出框的页面构造函数,注入
AppModalService
类
构造函数
-
调用服务类的show方法,传入弹出框组件类
调用
通过subscribe
方法接收返回数据 -
弹出框传入参数
在弹出框中,需要对参数进行@Input
注解,如下图代码

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

运行效果
无参数

有参数


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

网友评论