angular2 模态框即弹窗示例一

时间：2020-01-22 18:12:46 阅读：267 评论：0 收藏：0 [点我收藏+]

标签：oid 引入 title 模块 cto image outer sig info

已安装完的请忽略（此步骤参照 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 模态框即弹窗示例一

标签：oid 引入 title 模块 cto image outer sig info

原文地址：https://www.cnblogs.com/kukai/p/12228982.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

angular2 模态框 即弹窗示例 一

1、安装组件

2. 导入模块

3. 引入样式与 SVG 资源

angular2 模态框即弹窗示例一