你可以替换但不能自定义默认ABP组件的原因是禁用或更改该组件的一部分可能会导致问题. 所以我们把这些组件称为可替换组件.

创建一个你想要使用的新组件,添加到 中的 declarations 和entryComponents 中.

然后打开 app.component.ts 使用 AddReplaceableComponent 将你的组件替换ABP组件. 如下所示:

每个ABP主题模块有3个布局,分别是ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent. 这些布局可以用相同的方式替换.

下面的例子解释了如何更换 ApplicationLayoutComponent:

运行以下命令在 angular 文件夹中生成布局:

  1. yarn ng generate component my-application-layout

在你的布局模板(my-application-layout.component.html)中添加以下代码:

  1. <router-outlet></router-outlet>
  1. import { AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
  2. import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents enum for component keys
  3. import { Store } from '@ngxs/store'; // imported Store
  4. import { MyApplicationLayoutComponent } from './my-application-layout/my-application-layout.component'; // imported MyApplicationLayoutComponent
  6. @Component(/* component metadata */)
  7. export class AppComponent {
  8.   constructor(
  9.     private store: Store, // injected Store
  10.   ) {
  11.     // dispatched the AddReplaceableComponent action
  12.     this.store.dispatch(
  13.       new AddReplaceableComponent({
  14.         component: MyApplicationLayoutComponent,
  15.         key: eThemeBasicComponents.ApplicationLayout,
  16.       }),
  17.     );
  18.   }
  19. }

Layout Components

如何替换LogoComponent

在 angular 目录下运行以下命令创建新的组件 LogoComponent:

  1. yarn ng generate component logo --inlineTemplate --inlineStyle --entryComponent
  3. # You don't need the --entryComponent option in Angular 9

打开 src/app/logo 目录下生成的 logo.component.ts 并使用以下内容替换它:

打开 src/app 目录下的 app.component.ts 做以下修改:

  1. import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
  2. import { Store } from '@ngxs/store'; // imported Store
  3. import { LogoComponent } from './logo/logo.component'; // imported NavItemsComponent
  4. import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents
  5. //...
  7. @Component(/* component metadata */)
  8. export class AppComponent implements OnInit {
  9.   constructor(..., private store: Store) {} // injected Store
  11.   ngOnInit() {
  12.     //...
  14.     // added dispatch
  15.     this.store.dispatch(
  16.       new AddReplaceableComponent({
  17.         component: LogoComponent,
  18.         key: eThemeBasicComponents.Logo,
  19.       }),
  20.     );
  21.   }
  22. }

最终UI如下:

如何替换RoutesComponent

在 angular 目录下运行以下命令创建新的组件 RoutesComponent:

  1. yarn ng generate component routes --entryComponent
  3. # You don't need the --entryComponent option in Angular 9
  1. import { ABP, ReplaceableComponents } from '@abp/ng.core';
  2. import {
  3.   Component,
  4.   HostBinding,
  5.   Inject,
  6.   Renderer2,
  7.   TrackByFunction,
  8.   AfterViewInit,
  9. } from '@angular/core';
  10. import { fromEvent } from 'rxjs';
  11. import { debounceTime } from 'rxjs/operators';
  13. @Component({
  14.   selector: 'app-routes',
  15.   templateUrl: 'routes.component.html',
  16. })
  17. export class RoutesComponent implements AfterViewInit {
  18.   @HostBinding('class.mx-auto')
  19.   marginAuto = true;
  21.   smallScreen = window.innerWidth < 992;
  23.   constructor(private renderer: Renderer2) {}
  25.   ngAfterViewInit() {
  26.     fromEvent(window, 'resize')
  27.       .pipe(debounceTime(150))
  28.       .subscribe(() => {
  29.         this.smallScreen = window.innerWidth < 992;
  30.       });
  31.   }
  32. }

打开 src/app/routes 目录下生成的 routes.component.html 并使用以下内容替换它:

  1. <ul class="navbar-nav">
  2.   <li class="nav-item">
  3.     <a class="nav-link" routerLink="/"
  4.       ><i class="fas fa-home"></i> {{ '::Menu:Home' | abpLocalization }}</a
  5.     >
  6.   </li>
  7.   <li class="nav-item">
  8.     <a class="nav-link" routerLink="/my-page"><i class="fas fa-newspaper mr-1"></i>My Page</a>
  9.   </li>
  10.   <li
  11.     #navbarRootDropdown
  12.     [abpVisibility]="routeContainer"
  13.     class="nav-item dropdown"
  14.     display="static"
  15.     (click)="
  16.       navbarRootDropdown.expand
  17.         ? (navbarRootDropdown.expand = false)
  18.         : (navbarRootDropdown.expand = true)
  19.     "
  20.   >
  21.     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0)">
  22.       <i class="fas fa-wrench"></i>
  23.       {{ 'AbpUiNavigation::Menu:Administration' | abpLocalization }}
  25.     <div
  26.       #routeContainer
  27.       class="dropdown-menu border-0 shadow-sm"
  28.       (click)="$event.preventDefault(); $event.stopPropagation()"
  29.       [class.d-block]="smallScreen && navbarRootDropdown.expand"
  30.     >
  31.       <div
  32.         class="dropdown-submenu"
  33.         #dropdownSubmenu="ngbDropdown"
  34.         placement="right-top"
  35.         [autoClose]="true"
  36.         *abpPermission="'AbpIdentity.Roles || AbpIdentity.Users'"
  37.       >
  38.         <div ngbDropdownToggle [class.dropdown-toggle]="false">
  39.           <a
  40.             abpEllipsis="210px"
  41.             [abpEllipsisEnabled]="!smallScreen"
  42.             role="button"
  43.             class="btn d-block text-left dropdown-toggle"
  44.           >
  45.             <i class="fa fa-id-card-o"></i>
  46.             {{ 'AbpIdentity::Menu:IdentityManagement' | abpLocalization }}
  47.           </a>
  48.         </div>
  49.         <div
  50.           #childrenContainer
  51.           class="dropdown-menu border-0 shadow-sm"
  52.           [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
  53.         >
  54.           <div class="dropdown-submenu" *abpPermission="'AbpIdentity.Roles'">
  55.             <a class="dropdown-item" routerLink="/identity/roles">
  56.               {{ 'AbpIdentity::Roles' | abpLocalization }}</a
  57.             >
  58.           </div>
  59.           <div class="dropdown-submenu" *abpPermission="'AbpIdentity.Users'">
  60.             <a class="dropdown-item" routerLink="/identity/users">
  61.               {{ 'AbpIdentity::Users' | abpLocalization }}</a
  62.             >
  63.           </div>
  64.         </div>
  65.       </div>
  67.       <div
  68.         class="dropdown-submenu"
  69.         ngbDropdown
  70.         #dropdownSubmenu="ngbDropdown"
  71.         placement="right-top"
  72.         [autoClose]="true"
  73.         *abpPermission="'AbpTenantManagement.Tenants'"
  74.       >
  75.         <div ngbDropdownToggle [class.dropdown-toggle]="false">
  76.           <a
  77.             abpEllipsis="210px"
  78.             [abpEllipsisEnabled]="!smallScreen"
  79.             role="button"
  80.             class="btn d-block text-left dropdown-toggle"
  81.           >
  82.             <i class="fa fa-users"></i>
  83.             {{ 'AbpTenantManagement::Menu:TenantManagement' | abpLocalization }}
  84.           </a>
  85.         </div>
  86.         <div
  87.           #childrenContainer
  88.           class="dropdown-menu border-0 shadow-sm"
  89.           [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
  90.         >
  91.           <div class="dropdown-submenu" *abpPermission="'AbpTenantManagement.Tenants'">
  92.             <a class="dropdown-item" routerLink="/tenant-management/tenants">
  93.               {{ 'AbpTenantManagement::Tenants' | abpLocalization }}</a
  94.             >
  95.           </div>
  96.         </div>
  97.       </div>
  98.     </div>
  99.   </li>
  100. </ul>

打开 src/app 目录下的 app.component.ts 做以下修改:

最终UI如下:

New routes

如何替换NavItemsComponent

在 angular 目录下运行以下命令创建新的组件 NavItemsComponent:

  1. yarn ng generate component nav-items --entryComponent
  3. # You don't need the --entryComponent option in Angular 9

打开 src/app/nav-items 目录下生成的 nav-items.component.ts 并使用以下内容替换它:

  1. import {
  2.   ApplicationConfiguration,
  3.   AuthService,
  4.   ConfigState,
  5.   SessionState,
  6.   SetLanguage,
  7. } from '@abp/ng.core';
  8. import { Component, AfterViewInit } from '@angular/core';
  9. import { Navigate, RouterState } from '@ngxs/router-plugin';
  10. import { Select, Store } from '@ngxs/store';
  11. import { Observable, fromEvent } from 'rxjs';
  12. import { map, debounceTime } from 'rxjs/operators';
  13. import snq from 'snq';
  15. @Component({
  16.   selector: 'app-nav-items',
  17.   templateUrl: 'nav-items.component.html',
  18. })
  19. export class NavItemsComponent implements AfterViewInit {
  20.   @Select(ConfigState.getOne('currentUser'))
  21.   currentUser$: Observable<ApplicationConfiguration.CurrentUser>;
  23.   @Select(ConfigState.getDeep('localization.languages'))
  24.   languages$: Observable<ApplicationConfiguration.Language[]>;
  26.   smallScreen = window.innerWidth < 992;
  28.   get defaultLanguage$(): Observable<string> {
  29.     return this.languages$.pipe(
  30.       map(
  31.         languages =>
  32.           snq(
  33.             () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName,
  34.           ),
  35.         '',
  36.       ),
  37.     );
  38.   }
  40.   get dropdownLanguages$(): Observable<ApplicationConfiguration.Language[]> {
  41.     return this.languages$.pipe(
  42.       map(
  43.         languages =>
  45.         [],
  46.       ),
  47.     );
  48.   }
  50.   get selectedLangCulture(): string {
  51.   }
  53.   constructor(private store: Store, private authService: AuthService) {}
  55.   ngAfterViewInit() {
  56.     fromEvent(window, 'resize')
  57.       .pipe(debounceTime(150))
  58.       .subscribe(() => {
  59.         this.smallScreen = window.innerWidth < 992;
  60.       });
  61.   }
  63.   onChangeLang(cultureName: string) {
  64.     this.store.dispatch(new SetLanguage(cultureName));
  65.   }
  67.   logout() {
  68.     this.authService.logout().subscribe(() => {
  69.       this.store.dispatch(
  70.         new Navigate(['/'], null, {
  71.           state: { redirectUrl: this.store.selectSnapshot(RouterState).state.url },
  72.         }),
  73.       );
  74.     });
  75.   }
  76. }

打开 src/app/nav-items 目录下生成的 nav-items.component.html 并使用以下内容替换它:

  1. <ul class="navbar-nav">
  2.   <input type="search" placeholder="Search" class="bg-transparent border-0 text-white" />
  3.   <li *ngIf="(dropdownLanguages$ | async)?.length > 0" class="nav-item">
  4.     <div class="dropdown" ngbDropdown #languageDropdown="ngbDropdown" display="static">
  5.       <a
  6.         ngbDropdownToggle
  7.         class="nav-link"
  8.         href="javascript:void(0)"
  9.         role="button"
  10.         id="dropdownMenuLink"
  11.         data-toggle="dropdown"
  12.         aria-haspopup="true"
  13.         aria-expanded="false"
  14.       >
  15.         {{ defaultLanguage$ | async }}
  16.       </a>
  17.       <div
  18.         class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
  19.         aria-labelledby="dropdownMenuLink"
  20.         [class.d-block]="smallScreen && languageDropdown.isOpen()"
  21.       >
  22.         <a
  23.           *ngFor="let lang of dropdownLanguages$ | async"
  24.           href="javascript:void(0)"
  25.           class="dropdown-item"
  26.           (click)="onChangeLang(lang.cultureName)"
  27.           >{{ lang?.displayName }}</a
  28.         >
  29.       </div>
  30.     </div>
  31.   </li>
  33.   <li class="nav-item">
  34.     <ng-template #loginBtn>
  35.       <a role="button" class="nav-link" routerLink="/account/login">{{
  36.         'AbpAccount::Login' | abpLocalization
  37.       }}</a>
  38.     </ng-template>
  39.     <div
  40.       *ngIf="(currentUser$ | async)?.isAuthenticated; else loginBtn"
  41.       ngbDropdown
  42.       class="dropdown"
  43.       #currentUserDropdown="ngbDropdown"
  44.       display="static"
  45.     >
  46.       <a
  47.         ngbDropdownToggle
  48.         class="nav-link"
  49.         href="javascript:void(0)"
  50.         role="button"
  51.         id="dropdownMenuLink"
  52.         data-toggle="dropdown"
  53.         aria-haspopup="true"
  54.         aria-expanded="false"
  55.       >
  56.         {{ (currentUser$ | async)?.userName }}
  57.       </a>
  58.       <div
  59.         class="dropdown-menu dropdown-menu-right border-0 shadow-sm"
  60.         aria-labelledby="dropdownMenuLink"
  61.         [class.d-block]="smallScreen && currentUserDropdown.isOpen()"
  62.       >
  63.         <a class="dropdown-item" routerLink="/account/manage-profile"
  64.           ><i class="fa fa-cog mr-1"></i>{{ 'AbpAccount::ManageYourProfile' | abpLocalization }}</a
  65.         >
  66.         <a class="dropdown-item" href="javascript:void(0)" (click)="logout()"
  67.           ><i class="fa fa-power-off mr-1"></i>{{ 'AbpUi::Logout' | abpLocalization }}</a
  68.         >
  69.       </div>
  70.     </div>
  71.   </li>
  72. </ul>

打开 src/app 目录下的 app.component.ts 做以下修改:

  1. import { ..., AddReplaceableComponent } from '@abp/ng.core'; // imported AddReplaceableComponent
  2. import { Store } from '@ngxs/store'; // imported Store
  3. import { NavItemsComponent } from './nav-items/nav-items.component'; // imported NavItemsComponent
  4. import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents
  5. //...
  7. @Component(/* component metadata */)
  8. export class AppComponent implements OnInit {
  9.   constructor(..., private store: Store) {} // injected Store
  11.   ngOnInit() {
  12.     //...
  14.     // added dispatch
  15.     this.store.dispatch(
  16.       new AddReplaceableComponent({
  17.         component: NavItemsComponent,
  18.         key: eThemeBasicComponents.NavItems,
  19.       }),
  20.     );
  22. }