angular2 模态框 即弹窗示例 一

已安装完的请忽略 （此步骤参照  https://ng.ant.design/docs/getting-started/zh ）

1、安装组件

  $ npm install ng-zorro-antd --save

2. 导入模块

import { NzModalModule } from 'ng-zorro-antd/modal'; （此模块为弹窗模块）

import { NzButtonModule } from 'ng-zorro-antd/button'; （此示例应用了官方的按钮样式）

 

3. 引入样式与 SVG 资源

在  angular.json  文件中引入样式和 SVG icon 资源。

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

在 style.css 文件里：

   @import  "~ng-zorro-antd/style/index.min.css" ;  /* 引入基本样式 */
  @import  "~ng-zorro-antd/button/style/index.min.css" ;  /* 引入组件样式 */


示例 

1.            

 

 HTML代码

<button nz-button [nzType]="'danger'" (click)="showModal()"><span>Show Modal</span></button>

    <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">

      <p>Content one</p>

      <p>Content two</p>

      <p>Content three</p>

    </nz-modal>

<router-outlet></router-outlet>

ts 文件

 

 ts代码

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

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  isVisible = false;

  constructor() {}

  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;

  }

}

查看更多关于angular2 模态框 即弹窗示例 一的详细内容...