ABP-Book Store Application中文讲解 - Part 9: Authors: User Interface
TBD
1. 汇总
ABP-Book Store Application中文讲解-汇总-CSDN博客
2. 前一章
ABP-Book Store Application中文讲解 - Part 8: Authors: Application Layer-CSDN博客
项目之间的引用关系。
目录
2. 更改AuthorModule
3. 定义菜单-Menu Definition
3.1. 更改path为/book-store的requiredPolicy
3.3 route.provider.ts完整代码
4. ABP generate service proxy
5. 提示信息本地化
6. Author列表和新增、编辑、删除
7. 继续学习
1. 利用Angular Cli创建authors
右击app文件夹，选择Open in Integrated Terminal打开Terminal页面，输入以下命令，敲回车：
ng generate module author --module app --routing --route authors 
命令结束后，生成文件结构如下图所示：
2. 更改AuthorModule
/src/app/author/author.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';import { AuthorRoutingModule } from './author-routing.module';
import { AuthorComponent } from './author.component';
import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';// new added
import { SharedModule } from '../shared/shared.module';// new added@NgModule({declarations: [AuthorComponent],imports: [CommonModule,SharedModule,// new addedAuthorRoutingModule,NgbDatepickerModule// new added]
})
export class AuthorModule { }
3. 定义菜单-Menu Definition
src/app/route.provider.ts
3.1. 更改path为/book-store的requiredPolicy
{path: '/book-store',name: '::Menu:BookStore',iconClass: 'fas fa-book',order: 2,layout: eLayoutType.application,requiredPolicy: 'BookStore.Books || BookStore.Authors',// 新增加|| BookStore.Authors}3.2 新增path为/authors的菜单
{path: '/authors',name: '::Menu:Authors',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 4,layout: eLayoutType.application,requiredPolicy: 'BookStore.Authors',// new added}3.3 route.provider.ts完整代码
import { RoutesService, eLayoutType } from '@abp/ng.core';
import { APP_INITIALIZER } from '@angular/core';export const APP_ROUTE_PROVIDER = [{ provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
];function configureRoutes(routesService: RoutesService) {return () => {routesService.add([{path: '/',name: '::Menu:Home',iconClass: 'fas fa-home',order: 1,layout: eLayoutType.application,},{path: '/book-store',name: '::Menu:BookStore',iconClass: 'fas fa-book',order: 2,layout: eLayoutType.application,requiredPolicy: 'BookStore.Books || BookStore.Authors',// 新增加|| BookStore.Authors},{path: '/books',name: '::Menu:Books',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 3,layout: eLayoutType.application,requiredPolicy: 'BookStore.Books',// new added},{path: '/authors',name: '::Menu:Authors',// iconClass: 'fas fa-user',parentName: '::Menu:BookStore',order: 4,layout: eLayoutType.application,requiredPolicy: 'BookStore.Authors',// new added}]);};
}
4. ABP generate service proxy
前置条件是需要保证Acme.BookStore.HttpApi.Host启动。
在angular根目录，然后ctrl+`新打开一个Terminal console，运行以下命令：
abp generate-proxy -t ng生成完成后的目录结构如下图所示：
5. 提示信息本地化
打开Acme.BookStore.Domain.Shared，找到Localization/BookStore文件夹，编辑en.json和zh-Hans.json。添加内容如下：
en.json
"Menu:Authors": "Authors","Authors": "Authors","AuthorDeletionConfirmationMessage": "Are you sure to delete the author '{0}'?","BirthDate": "Birth date","NewAuthor": "New author","EditAuthor": "Edit author"zh-Hans.json
"Menu:Authors": "作者管理","Authors": "作者","AuthorDeletionConfirmationMessage": "你确定要删除作者 '{0}'?","BirthDate": "生日","NewAuthor": "新建作者","EditAuthor": "编辑作者"6. Author列表和新增、编辑、删除
/src/app/author/author.component.ts
此处新增、编辑界面可以参考Book那一章进行分开设计，即生成create-update-author component，然后动过NgbModal的open事件控制create-update-author的显示。
本篇文章不再介绍单独create-update-author component的方式，大家可以用这一个进行练手。
如果忘记怎么实现了，可以参考：（推荐使用这种方式）ABP-Book Store Application中文讲解 - Part 3: Creating, Updating and Deleting Books-CSDN博客
如果想要放在同一个组件里面，可参考ABP官网：
Web Application Development Tutorial - Part 9: Authors: User Interface | ABP.IO Documentation
7. 继续学习
ABP-Book Store Application中文讲解 - Part 10: Book to Author Relation-CSDN博客