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)

目录:https://www.jianshu.com/p/589af988637c

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

目的

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

效果如下

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

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

AppModalService

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

在模块中注册改服务类

使用方式

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

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

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

通过 方法接收返回数据

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

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

运行效果

无参数

有参数

总结

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

我的公众号

源代码

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