Abp官方提供的企业版(ASP.NET ZERO)[以下简称Zero]模板中前端使用的是Metronic,本篇博客介绍使用ng-zorro和ng-alain替换官方前端,以及使用官方生成器自动生成代码。

为什么要重复造轮子?

ng-zorro与Abp结合其实已经有很多例子了,但好像它们都是使用了ng-alain的项目结构,导致无法使用Abp官方的代码生成器,因此必须造一轮子符合 ASP.NET Zero前端的代码结构。

关于52ABP##

项目参考及使用了52Abp的很多代码。52Abp早期代码使用abp-ng2-module以及delon的相关包,后来作者将这些包整合进自己的yoyo-moudle包并实现了一些自定义。考虑更新速度(我喜欢偿新),我使用了官方abp-ng2-module和delon的package,一些比较特殊的功能通过扩展来实现(比如下面的MenuService)。

实现目标

  1. 全兼容Zero服务端(拿来即用)
  2. 兼容ABP官方代码生成器
  3. 使用ng-zorro最新版本
  4. 使用ng-alain 2.0+

开始

以下我只介绍实现过程中的几个重要过程,具体可参看项目源码。

  • 关于shared module: ng-alain官方有shared module的相关介绍。Zero模板中也有类似功能的module: src\shared\common\common.module.ts, 所以就没有使用Shared module,而是把其中的功能都放到CommonModule里面供其他moudle引入。
@NgModule({
imports: [
ngCommon.CommonModule,
AbpModule,
NgZorroAntdModule,
DelonABCModule,
AlainThemeModule.forChild()
],
exports: [
AbpModule,
NgZorroAntdModule,
AlainThemeModule,
DelonABCModule,
],
providers: [
ModalHelper,
],
})
  • 使用ng-zorro的消息提示:这一步使用了52Abp的代码,52Abp代码位于AppConsts.ts中,这边我将其独立到src\shared\helpers\MessageProviderHelper.ts中(代码比较长就不贴了, 请自行查看源码),并在src\root.component.ts中调用:
export class RootComponent implements OnInit {
constructor(
private _modalService: NzModalService,
private _messageService: NzMessageService,
private _notifyService: NzNotificationService,
) {} ngOnInit(): void {
MessageProviderHelper.useNgZorroMessage(this._messageService, this._modalService);
MessageProviderHelper.useNgZorroNotify(this._notifyService);
}
}
  • delon中有个Page-Header组件可以很方便的生成breadcrumb,但该功能只有在匹配到完整URL的时候才会自动生成。在Zero中有一个LanguageTexts的路由很特殊,它长这个样'languagetexts/:name/texts',在打开该页面的时候就无法完整匹配,也即无法生成Page-Header breadcrumb。解决方式其实很简单,查看Page-Header源码发现其依赖MenuService服务生成breadcrumb。那么我们就可以通过继承MenuService服务,override其中的getPathByUrl(url: string, recursive = false): Menu[]方法,其实确切应该要override getHit这个方法,但很不幸它是private的,无法override, 所以只能重写getPathByUrl,完整代码如下:
import { Injectable } from '@angular/core';
import { MenuService, Menu } from '@delon/theme'; @Injectable()
export class AbpMenuService extends MenuService {
getPathByUrl(url: string, recursive = false): Menu[] {
const ret: Menu[] = [];
let item = this.getHitEx(url, recursive); if (!item) { return ret; } do {
ret.splice(0, 0, item);
item = item.__parent;
} while (item); return ret;
} private getHitEx(url: string, recursive = false, cb: (i: Menu) => void = null) {
let item: Menu = null; while (!item && url) {
this.visit(i => {
if (cb) {
cb(i);
}
// 或条件就是修改增加的
if ((i.link != null && i.link === url) || (!(i.children && i.children.length) && url.startsWith(i.link))) {
item = i;
}
}); if (!recursive) { break; } url = url
.split('/')
.slice(0, -1)
.join('/');
} return item;
} }

接下去在delon.module.ts中将默认的MenuService替换成我们自己的:

export class DelonModule {
constructor(
@Optional()
@SkipSelf()
parentModule: DelonModule,
) { }
static forRoot(): ModuleWithProviders {
return {
ngModule: DelonModule,
providers: [
{
provide: PageHeaderConfig, useFactory: pageHeaderConfig
},
{
provide: MenuService, useClass: AbpMenuService, multi: false
}
],
};
}
}
  • 使用delon sidebar-nav组件:Zero模板和delon都有自己的Menu定义,要想直接使用sidebar-nav组件,必须将Zero的Menu定义转成delon的Menu定义,并添加到delon 的MenuService中。我们可以在src\app\shared\layout\nav\app-navigation.service.ts内增加一个辅助方法来完成该工作:
mapToNgAlainMenu() {
let menu = this.getMenu();
let ngAlainRootMenu = <Menu>{
text: this._localizationService.l(menu.name),
group: false,
hideInBreadcrumb: true,
children: []
};
this.generateNgAlainMenus(ngAlainRootMenu.children, menu.items); let ngAlainMenus = [
ngAlainRootMenu
];
this._ngAlainMenuService.add(ngAlainMenus);
} generateNgAlainMenus(ngAlainMenus: Menu[], appMenuItems: AppMenuItem[]) {
appMenuItems.forEach(item => {
let ngAlainMenu: Menu; ngAlainMenu = {
text: this._localizationService.l(item.name),
link: item.route,
icon: `${item.icon}`,
hide: !this.showMenuItem(item)
}; if (item.items && item.items.length > 0) {
ngAlainMenu.children = [];
this.generateNgAlainMenus(ngAlainMenu.children, item.items);
} ngAlainMenus.push(ngAlainMenu);
});
}

src\app\app.component.ts构造函数中使用:

constructor(
_appNavigationService: AppNavigationService
) {
super(injector); _appNavigationService.mapToNgAlainMenu(); // ...
}
  • 关于国际化:ng-zorro国际化在文档中描述的使用方法在这里,无论是“全局配置”还是“运行时修改”都需要在代码里硬导入相关语言模块。我们在结合AspNet zero使用的时候会遇到一个问题,Zero的多语言信息是从服务端动态获取到的,我们需要以一种动态的方式来设置多语言。其实在官方AspNet Zero前端模板里已经有实现方式,代码如下:
function registerLocales(resolve: (value?: boolean | Promise<boolean>) => void, reject: any) {
if (shouldLoadLocale()) {
let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
import(`@angular/common/locales/${angularLocale}.js`)
.then(module => {
registerLocaleData(module.default);
resolve(true);
}, reject);
} else {
resolve(true);
}
}

这里关键是运用WebPack的Dynamic Import Expression方式通过import语句动态导入语言模块,然后进行设置。此处相关知识可参考这篇blog:Dynamic Import of Locales in Angular

接下来我们实现ng-zorro的国际化动态导入:

首先,因为abp服务端的语言标志字符串和ng-zorro的有些许区别,所以必须建立一个Map来进行转换,可以把这个map写在appconfig.json中:

"ngZorroLocaleMappings": [
{
"from": "en",
"to": "en_US"
},
{
"from": "zh-Hans",
"to": "zh_CN"
}
]

以下代码位于root.module.ts

建立一个方法进行转换:

export function convertAbpLocaleToNgZorroLocale(locale: string): string {
if (!AppConsts.ngZorroLocaleMappings) {
return locale;
} let localeMapings = _.filter(AppConsts.ngZorroLocaleMappings, { from: locale });
if (localeMapings && localeMapings.length) {
return localeMapings[0]['to'];
} return locale;
}

最后实现动态配置:

function registerNgZorroLocales(injector: Injector) {
if (shouldLoadLocale()) {
let ngZorroLcale = convertAbpLocaleToNgZorroLocale(abp.localization.currentLanguage.name);
import(`ng-zorro-antd/esm5/i18n/languages/${ngZorroLcale}.js`)
.then(module => {
let nzI18nService = injector.get(NzI18nService);
nzI18nService.setLocale(module.default);
});
}
}

结束

平生第一次发文,不足之处请谅解。下一篇写关于使用ABP生成器生成全部代码,敬请期待。

项目参考

One More thing

最最最重要的当然是上源码啦:https://github.com/rqx110/abp-ng-zorro,因 ASP.NET Zero是商业项目,这边只提供前端,不提供后端的代码。

觉得还可以,请不要吝啬你的Star

基于ng-zorro的ASP.NET ZERO前端实现的更多相关文章

  1. 基于Microsoft Azure、ASP.NET Core和Docker的博客系统

    欢迎阅读daxnet的新博客:一个基于Microsoft Azure.ASP.NET Core和Docker的博客系统   2008年11月,我在博客园开通了个人帐号,并在博客园发表了自己的第一篇博客 ...

  2. 基于DDD的现代ASP.NET开发框架--ABP系列之3、ABP分层架构

    基于DDD的现代ASP.NET开发框架--ABP系列之3.ABP分层架构 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP的官方网站:ht ...

  3. 一种基于自定义代码的asp.net网站首页根据IP自动跳转指定页面的方法!

    一种基于自定义代码的asp.net网站首页根据IP自动跳转指定页面的方法! 对于大中型网站,为了增强用户体验,往往需要根据不同城市站点的用户推送或展现相应个性化的内容,如对于一些大型门户网站的新闻会有 ...

  4. 基于HBuilderX+UniApp+ThorUI的手机端前端开发处理

    现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信.H5.APP.WInForm.BS的Web管理端等都是常见的应用.本篇随笔概括性的介绍基于HB ...

  5. FineUI 基于 ExtJS 的专业 ASP.NET 控件库

    FineUI 基于 ExtJS 的专业 ASP.NET 控件库 http://www.fineui.com/

  6. 基于微软平台IIS/ASP.NET开发的大型网站有哪些呢?

    首先说明一下,本文绝不是要说Microsoft平台多么好,多么牛.只是要提醒一些LAMP/JAVA平台下的同志们,微软平台不至于像你们说的,和想象的那么不堪!只是你们自己不知道而已.同时,也希望广大M ...

  7. 基于微软平台IIS/ASP.NET开发的大型网站有哪些?

    首先说明一下,本文绝不是要说Microsoft平台多么好,多么牛.只是要提醒一些LAMP/Java平台下的同志们,微软平台不至于像你们说的,和想象的那么不堪!只是你们自己不知道而已.同时,也希望广大M ...

  8. 基于DDD的现代ASP.NET开发框架--ABP系列之2、ABP入门教程

    基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boi ...

  9. (转)基于微软平台IIS/ASP.NET开发的大型网站有哪些?

    首先说明一下,本文绝不是要说Microsoft平台多么好,多么牛.只是要提醒一些LAMP/JAVA平台下的同志们,微软平台不至于像你们说的,和想象的那么不堪!只是你们自己不知道而已.同时,也希望广大M ...

随机推荐

  1. VS2008 环境中完美搭建 Qt 4.7.4 静态编译的调试与发布(很不错,有六张插图说明,修改qmake.conf里的MD参数等)good

    为什么要在VS2008中使用QT静态编译呢?很简单,因为VS2008编译器编译出来的文件比mingw编译的要几乎小一半. 好了现在我们来做些准备工作,VS2008自然要安装的,然后打上SP1的补丁.然 ...

  2. 使用mingw 对libcURL,openSSL,zLib交叉编译

    使用mingw 对libcURL,openSSL,zLib交叉编译   将三个库解压到同一目录下 比如取目录名为 "source" 的目录   提前安装active-perl 配置 ...

  3. QtZint编译过程记录(要使用 QTMAKE_CFLAGS += /TP 参数)

    1,下载zint后,在zint-2.4.3\win32\vcx目录下找到zlib.props和libpng.props文件,分别改为zlib和libpng的源码目录.这2个开源库最好是找工程中使用的版 ...

  4. vs中debug的一个小技巧 -- debug时忽略某段代码

    #line 这是C#中的预处理命令 Visual Studio 2008 Visual Studio 2005 Visual Studio 2012 #line hidden 指令对调试器隐藏若干连续 ...

  5. JAVA命令运行cmd命令得到的结果乱码Runtime.getRuntime().exec("");

    Process process = Runtime.getRuntime().exec("cmd /c dir c:"); BufferedReader bufferedReade ...

  6. pytorch实现yolov3(1) yolov3基本原理

    理解一个算法最好的就是实现它,对深度学习也一样,准备跟着https://blog.paperspace.com/how-to-implement-a-yolo-object-detector-in-p ...

  7. centos安装最新版MySQL 8.0教程

    这篇教程是通过yum方式安装的 安装依赖 yum install libaio wget -y 检查MYSQL是否已安装 yum list installed | grep mysql 如果有先卸载 ...

  8. Hexo+NexT(三):Next主题配置详解

    阅读本篇之前,假定读者已经有了Node.js的基础,如需要补充Node.js知识的,请自行百度. Hexo是在Node.js框架下的一个项目,利用Node.js提供的强大功能,完成从Markdown到 ...

  9. 【过时】update progress has encountered a problem解决办法

    笔者第二次整理博客,已经抛弃MyEclipse了,我将公司项目转换成了idea的目录结构后大家都改换Idea进行开发,虽然我个人比较喜欢eclipse的简洁干净,但是Idea的确有很多方便开发的新功能 ...

  10. js中新增动态属性

    var cc = 'hell' var mm = { [cc](){ alert(33) } } mm.hell() 使用的就是数组形式