修改菜单

菜单在 @abp/ng.theme.basic包 ApplicationLayoutComponent 内部. 有几种修改菜单的方法,本文档介绍了这些方法. 如果你想完全替换菜单,请参考[组件替换文档]了解如何替换布局.

环境变量中的 logoUrl 是logo的url.

你可以在 src/assets 文件夹下添加logo并设置 logoUrl:

  1. export const environment = {
  2. // other configurations
  3. application: {
  4. name: 'MyProjectName',
  5. logoUrl: 'assets/logo.png',
  6. },
  7. // other configurations
  8. };

如何添加导航元素

通过 RoutesService

你可以通过调用 RoutesServiceadd 方法添加路由到菜单,它是一个单例的服务,在root中提供,你可以立即注入使用它.

  1. import { RoutesService, eLayoutType } from '@abp/ng.core';
  2. import { Component } from '@angular/core';
  3. @Component(/* component metadata */)
  4. export class AppComponent {
  5. constructor(routes: RoutesService) {
  6. routes.add([
  7. {
  8. path: '/your-path',
  9. name: 'Your navigation',
  10. order: 101,
  11. iconClass: 'fas fa-question-circle',
  12. requiredPolicy: 'permission key here',
  13. layout: eLayoutType.application,
  14. },
  15. {
  16. path: '/your-path/child',
  17. name: 'Your child navigation',
  18. parentName: 'Your navigation',
  19. order: 1,
  20. requiredPolicy: 'permission key here',
  21. },
  22. ]);
  23. }
  24. }

另一种方法是使用路由提供程序. 首先创建一个提供程序:

  1. // route.provider.ts
  2. import { RoutesService, eLayoutType } from '@abp/ng.core';
  3. import { APP_INITIALIZER } from '@angular/core';
  4. export const APP_ROUTE_PROVIDER = [
  5. { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
  6. ];
  7. function configureRoutes(routes: RoutesService) {
  8. return () => {
  9. routes.add([
  10. {
  11. path: '/your-path',
  12. name: 'Your navigation',
  13. requiredPolicy: 'permission key here',
  14. order: 101,
  15. iconClass: 'fas fa-question-circle',
  16. layout: eLayoutType.application,
  17. },
  18. {
  19. path: '/your-path/child',
  20. name: 'Your child navigation',
  21. parentName: 'Your navigation',
  22. requiredPolicy: 'permission key here',
  23. order: 1,
  24. },
  25. ]);
  26. };
  27. }

…然后在app.module.ts …

  1. import { NgModule } from '@angular/core';
  2. import { APP_ROUTE_PROVIDER } from './route.provider';
  3. @NgModule({
  4. providers: [APP_ROUTE_PROVIDER],
  5. // imports, declarations, and bootstrap
  6. })
  7. export class AppModule {}

下面是每个属性的工作原理:

  • path 是导航元素的绝对路径.
  • name 是导航元素的label. 可以使用本地化Key和本地化对象.
  • parentName 是菜单中父路由的 name 的引用,用于创建多级菜单项.
  • requiredPolicy 是用于访问该页面的权限Key. 参阅权限管理文档.
  • order 是导航元素的排序. Administration 的顺序是 100. 在排序top级别菜单项时请记得这一点.
  • iconClassi 标签的class, 它放在导航label的左边.
  • layout 定义路由使用哪个布局加载. (默认: eLayoutType.empty).
  • invisible 使该项在菜单中不可见. (默认: false).

通过 AppRoutingModuleroutes 属性

你可以通过在 app-routing.module 中将路由作为子属性添加到路由配置的 data 属性来定义路由. @abp/ng.core 包组织路由并将其存储在 ConfigState 中.ApplicationLayoutComponent 从存储中获取路由显示在菜单上.

你可以像以下一样添加 routes 属性:

  1. {
  2. path: 'your-path',
  3. data: {
  4. routes: {
  5. name: 'Your navigation',
  6. order: 101,
  7. iconClass: 'fas fa-question-circle',
  8. requiredPolicy: 'permission key here',
  9. children: [
  10. {
  11. path: 'child',
  12. name: 'Your child navigation',
  13. order: 1,
  14. requiredPolicy: 'permission key here',
  15. },
  16. ],
  17. },
  18. },
  19. }

或者你可以这样做:

  1. {
  2. path: 'your-path',
  3. data: {
  4. routes: [
  5. {
  6. path: '/your-path',
  7. name: 'Your navigation',
  8. order: 101,
  9. iconClass: 'fas fa-question-circle',
  10. requiredPolicy: 'permission key here',
  11. },
  12. {
  13. path: '/your-path/child',
  14. name: 'Your child navigation',
  15. parentName: 'Your navigation',
  16. order: 1,
  17. requiredPolicy: 'permission key here',
  18. },
  19. ] as ABP.Route[], // can be imported from @abp/ng.core
  20. },
  21. }

第二种方法的优点是你不必绑定到父/子结构,可以使用任何喜欢的路由.

如上所述添加 routes 属性后,导航菜单看起来像这样:

navigation-menu-via-app-routing

如何修补或删除导航元素

RoutesServicepatch 方法通过名称查找路由,并将配置替换为第二个参数传递的新配置. remove 方法会找到一个路由并将其连同其子路由一起删除.

  1. // this.routes is instance of RoutesService
  2. // eThemeSharedRouteNames enum can be imported from @abp/ng.theme.shared
  3. const dashboardRouteConfig: ABP.Route = {
  4. path: '/dashboard',
  5. name: '::Menu:Dashboard',
  6. parentName: '::Menu:Home',
  7. order: 1,
  8. layout: eLayoutType.application,
  9. };
  10. const newHomeRouteConfig: Partial<ABP.Route> = {
  11. iconClass: 'fas fa-home',
  12. parentName: eThemeSharedRouteNames.Administration,
  13. order: 0,
  14. };
  15. this.routes.add([dashboardRouteConfig]);
  16. this.routes.patch('::Menu:Home', newHomeRouteConfig);
  17. this.routes.remove(['Your navigation']);
  • 根据给定的 parentNameHome 导航移动到 Administration 下拉菜单下.
  • Home 添加了图标.
  • 指定 Home 的顺序为列表的第一项.
  • Home 添加了一个名为 Dashboard 的子路由.
  • 删除 Your navigation 与其子路由.

上述操作后,新的菜单看起来如下:

navigation-menu-after-patching

如何在菜单的右侧添加元素

你可以通过调用 NavItemsServiceaddItems 方法将元素添加到菜单的右侧. 这是一个单例服务,即以根身份提供. 因此你可以立即注入并使用它.

  1. import { NavItemsService } from '@abp/ng.theme.shared';
  2. import { Component } from '@angular/core';
  3. @Component({
  4. template: `
  5. <input type="search" placeholder="Search" class="bg-transparent border-0 color-white" />
  6. `,
  7. })
  8. export class MySearchInputComponent {}
  9. @Component(/* component metadata */)
  10. export class AppComponent {
  11. constructor(private navItems: NavItemsService) {
  12. navItems.addItems([
  13. {
  14. id: 'MySearchInput',
  15. order: 1,
  16. component: MySearchInputComponent,
  17. },
  18. {
  19. id: 'SignOutIcon',
  20. html: '<i class="fas fa-sign-out-alt fa-lg text-white m-2"><i>',
  21. action: () => console.log('Clicked the sign out icon'),
  22. order: 101, // puts as last element
  23. },
  24. ]);
  25. }
  26. }

上面我们在菜单添加了一个搜索输入和退出登录图标,最终UI如下:

navigation-menu-search-input

默认元素的排序为 100. 如果要将自定义元素放在默认值之前,请指定一个排序,最高为 99. 如果要将自定义元素放在默认值之后,请指定排序从 101 开始. 最后如果必须在默认值之间放置一个项目,请按如下所述修补默认元素顺序. 但有一个警告:我们将来可能会添加另一个默认元素,排序也为 100.

如何修补或删除右侧部分元素

NavItemsServicepatchItem 方法通过 id 查找元素,并将配置替换为第二个参数传递的新配置. removeItem 方法会找到一个元素并删除.

  1. export class AppComponent {
  2. constructor(private navItems: NavItemsService) {
  3. navItems.patchItem(eThemeBasicComponents.Languages, {
  4. requiredPolicy: 'new policy here',
  5. order: 1,
  6. });
  7. navItems.removeItem(eThemeBasicComponents.CurrentUser);
  8. }
  9. }
  • 使用新的 requiredPolicy 和新的 order 修补了语言下拉菜单元素.
  • 删除了当前用户的下拉菜单元素.

下一步是什么?