上一篇写到 使用.net core ABP和Angular模板构建博客管理系统（实现博客列表页面）：//www.greatytc.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")
])
])
];
运行后效果如下
