在 ABP 框架中使用 ng-zorro-antd UI 组件
Using ng-zorro-antd UI Components With the ABP Framework
我们能否将 ng-zorro-antd 视为 abp UI 组件的替代品 angular?
链接
https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement
添加ng-zorro-antd
yarn add ng-zorro-antd
将所需模块添加到 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,
ThemeSharedModule,
ThemeBasicModule,
NgbDropdownModule,
NgxValidateCoreModule,
NzLayoutModule //add this line
],
providers: []
})
export class SharedModule {}
- 按照
的说明进行操作
https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement#how-to-replace-a-layout
- 转到 \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>
我们能否将 ng-zorro-antd 视为 abp UI 组件的替代品 angular?
链接
https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement
添加ng-zorro-antd
yarn add ng-zorro-antd
将所需模块添加到 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,
ThemeSharedModule,
ThemeBasicModule,
NgbDropdownModule,
NgxValidateCoreModule,
NzLayoutModule //add this line
],
providers: []
})
export class SharedModule {}
- 按照 的说明进行操作
https://docs.abp.io/en/abp/latest/UI/Angular/Component-Replacement#how-to-replace-a-layout
- 转到 \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>