Ant Design of Angular UI组件使用

组件使用介绍：https://ng.ant.design/#/docs/angular/introduce

1、npm安装ui组件

npm install ng-zorro-antd --save

如果你的网络环境不佳，推荐使用cnpm。

2、工程中引入UI组件库

直接用下面的代码替换/src/app/app.module.ts的内容

注意：在根 module 中需要使用NgZorroAntdModule.forRoot()，在子 module 需要使用NgZorroAntdModule

import{ BrowserModule }from'@angular/platform-browser';

import{ BrowserAnimationsModule }from'@angular/platform-browser/animations';

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

import{ FormsModule }from'@angular/forms';

import{ HttpClientModule }from'@angular/common/http';

import{ NgZorroAntdModule }from'ng-zorro-antd';

import{ AppComponent }from'./app.component';

@NgModule({

declarations:[

AppComponent

],

imports:[

BrowserModule,

FormsModule,

HttpClientModule,

BrowserAnimationsModule,

NgZorroAntdModule.forRoot()

],

bootstrap:[AppComponent]

})

export classAppModule { }

这样就成功在全局引入了 ng-zorro-antd。

在html中使用组件

用下面的代码替换/src/app/app.component.html

<button nz-button [nzType]="'primary'"> 测试按钮</button>