nz-modal 使用

使用步骤

前提：使用公司自己开发的平台

存在问题

引入模块后，按antd文档上第一个示例写代码，但是对话框里的文字不显示

解决方式

参考下面第二步

1、引入模块

//引入对话框模块
import { NzModalModule } from 'ng-zorro-antd/modal';
//引入按钮模块
import { NzButtonModule } from 'ng-zorro-antd/button';//以下是antd的原文
export class NzDemoModalBasicComponent {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;}
}

2、html文件

<button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button>
<nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"><p>我是测试文字1</p><p>我是测试文字2</p>
</nz-modal>

说明：antd文档中第一个对话框里写的<ng-container *nzModalContent>试不出来，就没使用

3、实现效果

nz-modal 使用相关推荐

bootstrap modal 弹出效果
window.showMsg = function (msg) {//显示悬浮窗$("#autoCloseModal").modal("show")//设置文本 ...
Bootstrap：关于bootstrap单页面中多Modal的问题
2019独角兽企业重金招聘Python工程师标准>>> 在单页面中新建用户采用modal而判断添加成功后还采用modal提示成功后右边的滚动条会出来俩条,覆盖整个body的阴影瞬间变 ...
bootstrapdatetimepicker 隐藏触发 bootstrap modal隐藏事件
如果在bootstrap modal 里面使用 bootstrapdatetimepicker ,并且写一个modal的隐藏方法清空所有文本. 那么当你选择日期之后会发现modal框里所有的文本框的值 ...
ionic 项目中添加modal的步骤流程
1.首先在templates文件夹下面定义一个新页面,xxx.html,template文件夹在空项目里面是没有的,需要手动添加一个,放在WWW文件夹下面. <ion-modal-view> ...
Storyboard里面的几种Segue区别及视图的切换：push，modal，popover，replace和custom
一.视图切换类型介绍在storyboard中,segue有几种不同的类型,在iphone和ipad的开发中,segue的类型是不同的. 在iphone中,segue有:push,modal,和cus ...
将功能绑定到Twitter Bootstrap Modal关闭
我在一个新项目上使用Twitter Bootstrap lib,我希望页面的一部分刷新并检索模式关闭时的最新json数据. 我看不到文档中的任何地方,有人可以向我指出或提出解决方案. 使用记录方法的两 ...
iOS开发UI篇—Modal简单介绍
iOS开发UI篇-Modal简单介绍一.简单介绍除了push之外,还有另外一种控制器的切换方式,那就是Modal 任何控制器都能通过Modal的形式展⽰出来 Modal的默认效果:新控制器从屏幕的 ...
yii2 modal弹窗之ActiveForm ajax表单异步验证
作者:白狼出处:http://www.manks.top/yii2_modal_activeform_ajax.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位 ...
bootstrap modal垂直居中（简单封装）
1.使用modal 弹出事件方法: 未封装前: <!DOCTYPE html> <html lang="en"> <head><meta ...
bootstrap中modal弹出框的使用
modal按钮位置安放: <button class="btn btn-primary" onclick="edit()" data-toggle=&qu ...

nz-modal 使用

使用步骤

存在问题

解决方式

nz-modal 使用相关推荐

最新文章

热门文章