ant-design for angular的常用组件类

新建文件antDesign.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

// 导入所需的 Ant Design Angular 组件
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';
import { NzSelectModule } from 'ng-zorro-antd/select';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzModalModule } from 'ng-zorro-antd/modal';
import { NzFormModule } from 'ng-zorro-antd/form';
import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
import { NzRadioModule } from 'ng-zorro-antd/radio';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzTabsModule } from 'ng-zorro-antd/tabs';
import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzStepsModule } from 'ng-zorro-antd/steps';
import { NzAlertModule } from 'ng-zorro-antd/alert';
import { NzCarouselModule } from 'ng-zorro-antd/carousel';
import { NzMessageModule } from 'ng-zorro-antd/message';
import { NzPaginationModule } from 'ng-zorro-antd/pagination';
import { NzProgressModule } from 'ng-zorro-antd/progress';
import { NzSpinModule } from 'ng-zorro-antd/spin';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    // 导入所需的 Ant Design Angular 组件
    NzLayoutModule, 
    NzMenuModule,
    NzButtonModule,
    NzInputModule,
    NzSelectModule,
    NzTableModule,
    NzModalModule,
    NzFormModule,
    NzDatePickerModule,
    NzRadioModule,
    NzCheckboxModule,
    NzIconModule,
    NzTabsModule,
    NzCollapseModule,
    NzDropDownModule,
    NzStepsModule,
    NzAlertModule,
    NzCarouselModule,
    NzMessageModule,
    NzPaginationModule,
    NzProgressModule,
    NzSpinModule,
  ],
  exports: [
    // 导出所需的 Ant Design Angular 组件，以便在其他模块中使用
    NzLayoutModule, 
    NzMenuModule,
    NzButtonModule,
    NzInputModule,
    NzSelectModule,
    NzTableModule,
    NzModalModule,
    NzFormModule,
    NzDatePickerModule,
    NzRadioModule,
    NzCheckboxModule,
    NzIconModule,
    NzTabsModule,
    NzCollapseModule,
    NzDropDownModule,
    NzStepsModule,
    NzAlertModule,
    NzCarouselModule,
    NzMessageModule,
    NzPaginationModule,
    NzProgressModule,
    NzSpinModule,
  ]
})
export class AntDesignModule { }

然后在app.module.ts打入这个模块，这样所有的页面就可以使用ant design的常用组件了。

注意踩坑的地方。子組件的引用也要在app.module.ts中， 否则子组件可能无法识别。