angular使用什么样的样式_Anuglar10+Ngzorro使用

Ant Design of Angular

(ng-zorro-antd)是遵循 Ant Design 设计规范的 Angular UI 组件库，主要用于研发企业级中后台产品。是开箱即用的高质量 Angular 组件库，与 Angular 保持同步升级。

下文将介绍Angular 10 使用 ng-zorro-antd的方式。

截止目前ng-zorro-antd 的版本是 10.2.0。

1.ngzorro10版本以前：

创建好Angular项目之后，通过ng add ng-zorro-antd添加组件。

随后在项目的 app.module.ts中 添加导入，如下例：

import {NgZorroAntdModule} from 'ng-zorro-antd'; imports: [   BrowserModule,   AppRoutingModule,   NgZorroAntdModule,   FormsModule,   ReactiveFormsModule,   HttpClientModule,   BrowserAnimationsModule ],

引入以后就可正常使用ng-zorro-antd的组件。

2.在ngzorro10版本以后：

无需在app.module.ts 引入NgZorroAntdModule，已经取消这个Module。

在ng add ng-zorro-antd完之后，需要引入样式文件：

在 angular.json 中引入如下文件：

{   "styles": [     "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"   ] }

在 style.css 中引入预构建样式文件:

 @import "~ng-zorro-antd/ng-zorro-antd.min.css";

在使用组件时，如果使用多 Module 管理方式，NG-ZORRO 的模块需要在每个子 Module 中都要

import，如下例：

import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { WelcomeRoutingModule } from './welcome-routing.module';import { WelcomeComponent } from './welcome.component';import { NzGridModule } from 'ng-zorro-antd/grid';  //栅格模块import { NzInputModule } from 'ng-zorro-antd/input'; //输入框import { NzFormModule } from 'ng-zorro-antd/form';import { FormsModule, ReactiveFormsModule } from '@angular/forms';import { NzButtonModule } from 'ng-zorro-antd/button';import { NzRadioModule } from 'ng-zorro-antd/radio';import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';@NgModule({  imports: [    CommonModule,    WelcomeRoutingModule,    NzGridModule,    NzInputModule,    NzFormModule,    FormsModule,    ReactiveFormsModule,    NzButtonModule,    NzRadioModule,    NzCheckboxModule  ],  declarations: [WelcomeComponent],  exports: [WelcomeComponent]})export class WelcomeModule { }

各模块名称可以在官网中示例中查到。

同时也可以创建一个公用的module，引入这些常用的，然后再根module引用公用module即可。

Ps: 如果只有 app.module.ts，可以将这些模块全部引入，再按照以前的方式使用。