前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用.net core ABP和Angular模板构建博客管理系统(创建前端菜单及页面)

使用.net core ABP和Angular模板构建博客管理系统(创建前端菜单及页面)

作者头像
易兒善
发布2018-08-21 15:27:45
1K0
发布2018-08-21 15:27:45
举报
文章被收录于专栏:挖坑填坑

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

新建两个模块

代码语言:javascript
复制
ng g component blog/note
ng g component blog/note-book

修改路由

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

代码语言:javascript
复制
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 文件修改菜单如下:

代码语言:javascript
复制
    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")
            ])
        ])
    ];

运行后效果如下

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.10.25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 新建两个模块
  • 修改路由
  • 修改菜单
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档