abp angular 和mvc_使用.net core ABP和Angular模板构建博客管理系统（创建前端菜单及页面）...

上一篇写到 使用.net core ABP和Angular模板构建博客管理系统(实现博客列表页面)：http://www.jianshu.com/p/24c5f23007d0

新建两个模块

ng g component blog/note

ng g component blog/note-book

修改路由

打开app-routing.module.ts 文件添加如下路由

import {NoteComponent} from '@app/blog/note/note.component';

import {NoteBookComponent} from '@app/blog/note-book/note-book.component';

RouterModule.forChild([

{

path: '',

component: AppComponent,

children: [

{ path: 'home', component: HomeComponent, canActivate: [AppRouteGuard] },

{ path: 'users', component: UsersComponent, data: { permission: 'Pages.Users' }, canActivate: [AppRouteGuard] },

{ path: 'roles', component: RolesComponent, data: { permission: 'Pages.Roles' }, canActivate: [AppRouteGuard] },

{ path: 'tenants', component: TenantsComponent, data: { permission: 'Pages.Tenants' }, canActivate: [AppRouteGuard] },

{ path: 'about', component: AboutComponent },

{ path: 'note', component: NoteComponent },

{ path: 'notebook', component: NoteBookComponent }

]

}

])

修改菜单

ABP这个使用的图表库是：https://materialdesignicons.com/

打开app\layout\sidebar-nav.component.ts 文件修改菜单如下：

menuItems: MenuItem[] = [

new MenuItem(this.l("HomePage"), "", "home", "/app/home"),

new MenuItem(this.l("System"), "", "apps", "", [

new MenuItem(this.l("Tenants"), "Pages.Tenants", "business", "/app/tenants"),

new MenuItem(this.l("Users"), "Pages.Users", "people", "/app/users"),

new MenuItem(this.l("Roles"), "Pages.Roles", "local_offer", "/app/roles"),

new MenuItem(this.l("About"), "", "info", "/app/about"),

]),

new MenuItem(this.l("博客"), "", "book", "", [

new MenuItem(this.l("文章管理"), "", "book", "/app/note"),

new MenuItem(this.l("文集管理"), "", "book", "/app/notebook"),

]),

new MenuItem(this.l("MultiLevelMenu"), "", "menu", "", [

new MenuItem("ASP.NET Boilerplate", "", "", "", [

new MenuItem("Home", "", "", "https://aspnetboilerplate.com/?ref=abptmpl"),

new MenuItem("Templates", "", "", "https://aspnetboilerplate.com/Templates?ref=abptmpl"),

new MenuItem("Samples", "", "", "https://aspnetboilerplate.com/Samples?ref=abptmpl"),

new MenuItem("Documents", "", "", "https://aspnetboilerplate.com/Pages/Documents?ref=abptmpl")

]),

new MenuItem("ASP.NET Zero", "", "", "", [

new MenuItem("Home", "", "", "https://aspnetzero.com?ref=abptmpl"),

new MenuItem("Description", "", "", "https://aspnetzero.com/?ref=abptmpl#description"),

new MenuItem("Features", "", "", "https://aspnetzero.com/?ref=abptmpl#features"),

new MenuItem("Pricing", "", "", "https://aspnetzero.com/?ref=abptmpl#pricing"),

new MenuItem("Faq", "", "", "https://aspnetzero.com/Faq?ref=abptmpl"),

new MenuItem("Documents", "", "", "https://aspnetzero.com/Documents?ref=abptmpl")

])

])

];

运行后效果如下