问答

angular10 中使用NzModalModule 弹出层,点击一次按钮,弹出多个

作者:admin 2021-06-21 我要评论

而且如果关闭所有弹出框,则再次点击按钮时模态框不再弹出,完全照着官网代码写的,还没做多少修改。 这是父页面引用时的代码: div class="f-right m-b-10" but...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

而且如果关闭所有弹出框,则再次点击按钮时模态框不再弹出,完全照着官网代码写的,还没做多少修改。

这是父页面引用时的代码:

<div class="f-right m-b-10">
  <button nz-button nzType="primary" (click)="startEdit()"><i nz-icon nzType="plus" nzTheme="outline"></i>新增</button>
</div>
 <app-modal-panel [parent]="this" [isShowModal]="isShowModal"></app-modal-panel>

这是模态框代码:

<nz-modal
  [(nzVisible)]="isShowModal"
  [nzTitle]="modalTitle"
  [nzContent]="modalContent"
  [nzFooter]="modalFooter"
  (nzOnCancel)="handleCancel()"
  nzWrapClassName="manufactureModal"
>
  <ng-template #modalTitle>
    厂家信息
  </ng-template>

  <ng-template #modalContent>
    <p>Modal Content</p>
    <p>Modal Content</p>
    <p>Modal Content</p>
    <p>Modal Content</p>
    <p>Modal Content</p>
  </ng-template>

  <ng-template #modalFooter>
    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">保存</button>
    <button nz-button nzType="default" (click)="handleCancel()">取消</button>
  </ng-template>
</nz-modal>

运行效果:因为有很多个,所以遮罩就全黑了
image.png

###

angular版本应该和ng zorro版本一致吧?现在的ng zorro稳定版还是9x,和angular10配合应该有问题。

###
重复的问提

需要看一下startEdit方法的代码,待补充。

再次点击按钮时模态框不再弹出

肯以肯定,关闭后点击按钮不再弹出的问提是因为app-modal-panel 组件的isShowModal参数只有input没有output,也就是说关闭弹出框以后,app-modal-panel无法把组件的状态反馈给父级组件,这里需要双向绑定。参考nz-modalnzVisible参数就是双向绑定的。

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • angular10 中使用NzModalModule 弹出层

    angular10 中使用NzModalModule 弹出层

  • picture-in-picture 画中画,在直播中

    picture-in-picture 画中画,在直播中

  • Electron网页打印页脚跟页面内容重叠,

    Electron网页打印页脚跟页面内容重叠,

  • vue 请求跨域问题解决方法?

    vue 请求跨域问题解决方法?

腾讯云代理商
海外云服务器