Angular5學習筆記 - 配置NG-ZORRO（八）

1、在項目中集成組件

$ cd PROJECT_NAME
$ npm install ng-zorro-antd --save

 

2、在項目中導入組件

直接用下面的代碼替換 /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 class AppModule { } 

這樣就成功在全局引入了 ng-zorro-antd。

NgZorroAntdModule.forRoot() 方法可以接受一個可選的配置對象，用於引入外部的字體文件，類型爲 { extraFontName: string, extraFontUrl: string }。

 

3、在項目中使用組件

用下面的代碼追加至 /src/app/app.component.html文件末尾

<button nz-button [nzType]="'primary'">primary</button>

<button nz-button [nzType]="'dashed'">dashed</button>

<button nz-button [nzType]="'default'">default</button>

<button nz-button [nzType]="'danger'">danger</button>

<button nz-button [nzShape]="'default'">defaultShape</button>

<button nz-button [nzShape]="'circle'">O</button>

<button nz-button [nzSize]="'large'">L</button>

<button nz-button [nzSize]="'default'">M</button>

<button nz-button [nzSize]="'small'">S</button>

<button nz-button [nzGhost]="true">L</button>

<button nz-button [nzLoading]="true">L</button>

 

4、效果預覽