ng-zorro-antd 入門

1. ng new tk-zorro-web --skip-install --style=scss
2. cd tk-zorro-web
3. npm i
4. npm install --save ng-zorro-antd
5. ng serve --port 4201

• // 下載https://ng.ant.design/assets/download/fonts.zip

// 解壓到:/assets/fonts/

• // /src/app/app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    NgZorroAntdModule.forRoot({ extraFontName: 'anticon', extraFontUrl: './assets/fonts/iconfont' })
  ]
})

• // /src/app/app.component.html

<button nz-button [nzType]="'primary'">測試按鈕</button>

• // /src/shared/shared.module.ts

ng g m shared

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

@NgModule({
  imports: [
    NgZorroAntdModule
  ], exports: [
    NgZorroAntdModule
  ]
})

• // /src/monitor/monitor.module.ts

ng g m monitor

import { SharedModule } from '../shared';

@NgModule({
  imports: [
    SharedModule
  ]
})

• // /src/monitor/monitor-layout/monitor-layout.component.html

ng g c monitor/monitor-layout

<button nz-button [nzType]="'primary'">測試按鈕</button>