介绍
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
路由守护
路由守护的功能,是在定义ng路由的时候,添加一个条件,判断当前登录信息是否能够进行正常的路由调整。打开文件 ,导入 ,
修改 路径,添加内容如下
添加路由守护之后,在打开项目首页,会发现自动界面会自动跳转到登录页面
登录界面主要元素
登录界面主要有三处主要元素:租户切换、登录框、多语言切换
租户切换:更改当前租户信息
登录框:账号和密码区域
多语言切换:修改当前页面多语言信息
多语言切换
如下图所示,在界面上,有一系列的语言列表,点击国家旗帜,即可跳转到对应的语言
将angular项目中的 相关文件copy到 中,目录结构
修改 文件,修改完毕后的内容如下:
只有采用该方式,语言列表才会显示
修改 ,只要修改selector即可,修改完毕的内容如下
修改布局文件 ,修改完毕代码如下
租户切换
租户切换的界面如下
使用的文件如下图
修改 ,内容如下
修改 ,内容如下
修改 ,内容如下
修改 ,内容如下
在 layout.module中导入这两个组件
注意组件 ,由于该组件是动态弹出框,所以需要添加在 中,关于动态加载的弹出框,在后面的篇幅会介绍。
修改布局界面,导入切换租户组件
运行结果
租户切换
语言切换
总结
abp自带项目angular中,多语言的切换和租户的切换,是登录界面上进行操作的,其本质是将租户信息和多语言信息存储到cookie中,我们使用abp组件的功能,修改abp组件,符合ng-alain项目的样式即可实现。通过修改组件也发现,ng-alain在组件命名方面是由规范的,主要组件,需要用 等前缀。
我的公众号
源代码
源代码:https://github.com/ZhaoRd/abp-alain
领取专属 10元无门槛券
私享最新 技术干货