angular5中使用ngzorro

官方文档：
https://ng.ant.design/docs/getting-started/zh
NG-ZORRO教程：https://github.com/NG-ZORRO/today-ng-steps

1、ngzorr组件安裝

npm install ng-zorro-antd --save

2.引入模块

在根模块中app.module中引入ng-zorro-antd。
这里有两种引入方式，全局引入或单独引入，本例子是全局引入

image.png

---

单独引入某组件如下

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

import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    CommonModule,
    NzButtonModule
  ]
})
export class YourModule { }

---

3.引入NG-ZORRO样式及svg资源

         "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
               "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
            ],

如下图所示

image.png

ngzorro 组件使用

image.png

import { Component, OnInit} from '@angular/core';

import * as $ from 'jquery'

@Component({

  selector: 'app-root',

 templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']


})

export class AppComponent implements OnInit{

  title = 'testAng';

  file;

  imageUrl:any;

  ngOnInit(){

    console.log('ngOnInit生命周期钩子---001');

  }

    isVisible = false;

    showModal(): void {

    this.isVisible = true;

  }

  handleOk(): void {

    console.log('Button ok clicked!');

    this.isVisible = false;

  }

  handleCancel(): void {

    console.log('Button cancel clicked!');

    this.isVisible = false;

  }

}

效果

点击【弹窗】出现如下

image.png