已安装完的请忽略 （此步骤参照? 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测试数据ponent.html',
??styleUrls:?['./app测试数据ponent.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 模态框 即弹窗示例 一的详细内容...