将ng-zorro-antd UI组件与ABP框架一起使用

问题描述

我们可以考虑将ng-zorro-antd替换为abp角的UI组件吗？

链接

https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement

https://ng.ant.design/docs/introduce/en

解决方法

1. 添加ng-zorro-antd

   yarn add ng-zorro-antd

2. 将必需的模块添加到shared.module.ts

import { CoreModule } from '@abp/ng.core';
import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
import { NgModule } from '@angular/core';
import { ThemeBasicModule } from '@abp/ng.theme.basic';
import { ThemeSharedModule } from '@abp/ng.theme.shared';
import { NgxValidateCoreModule } from '@ngx-validate/core';
import { NzLayoutModule } from 'ng-zorro-antd/layout'; //add this line

@NgModule({
  declarations: [],imports: [
    CoreModule,ThemeSharedModule,ThemeBasicModule,NgbDropdownModule,NgxValidateCoreModule,NzLayoutModule //add this line
  ],exports: [
    CoreModule,providers: []
})
export class SharedModule {}

1. 按照
中的说明进行操作

https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement#how-to-replace-a-layout

1. 转到\ src \ app \ my-layout \ my-layout.component.html并添加以下代码。

  <nz-layout>
    <nz-header>Header</nz-header>
    <nz-content>
        <router-outlet></router-outlet>
    </nz-content>
    <nz-footer>Footer</nz-footer>
</nz-layout>