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

ng-alain菜单 加载方式

ng-alain是在startup.service.ts文件中设置了菜单信息

startup.service.ts

设置菜单的代码如下
菜单

菜单数据时通过加载assets/tmp/app-data.json文件所得
请求app-data.json

app-data.json文件内容如下:
app-data.json菜单项


添加菜单项

我们在app-data.json中添加菜单项:租户管理、用户管理、角色管理

新增菜单

菜单的格式格式是

{
          "text": "角色",  # 名称
          "link": "/app/roles", # 路径
          "icon": "icon-grid", # 菜单图标
          "i18n":"roles" # 翻译
}

为了菜单能够正常工作,必须添加翻译信息,需要在下面两个文件中添加key为tenants-list、users、roles的翻译信息

多语言文件

en.json

zh-CN.json


运行结果

英文

中文

我的公众号

我的公众号

源代码

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容