angular12里面ant-design的模态框的使用

新建一个模态框的共通组件

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
  selector: 'app-custom-modal',
  template: `
    <nz-modal
      [nzTitle]="title"
      [nzVisible]="isVisible"
      (nzOnCancel)="handleCancel()"
      (nzOnOk)="handleOk()"
    >
     <ng-container *ngTemplateOutlet="content"></ng-container>
    </nz-modal>

  `,
})
export class CustomModalComponent implements OnInit {
  @Input() title: string;
  @Input() isVisible:boolean;
  @Input() content: any;
  @Output() onCancel = new EventEmitter<void>();
  @Output() onOk = new EventEmitter<void>();

  constructor() {}

  ngOnInit(): void {
    console.log("child :", this.isVisible);
  }

  handleCancel() {
    console.log("child: cancel");
    this.isVisible = false;
    this.onCancel.emit();
  }
  handleOk(){
    console.log("child: ok");
    this.isVisible = false;
    this.onOk.emit();
  }

}

然后父组件对共通组件进行调用

父组件的html

<button (click)="openDialog()">Open Dialog</button>
<app-custom-modal [isVisible]="isDialogOpen" [content]="myFormContent"  (onCancel)="closeDialog()"  (onOk)="closeDialog()"></app-custom-modal>

<ng-template #myFormContent>
    <div class="myForm">
        <form [formGroup]="form">
            <!-- 这里是你的表单内容 -->
            <nz-form-item>
                <nz-form-label>Your Name</nz-form-label>
                <nz-form-control>
                    <input nz-input formControlName="name" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label>Your email</nz-form-label>
                <nz-form-control>
                    <input nz-input formControlName="email" />
                </nz-form-control>
            </nz-form-item>
        </form>
    </div>
   
</ng-template>

父组件的ts

 isDialogOpen = false;
 openDialog() {
    this.isDialogOpen = true;
  }

  closeDialog() {
    console.log("close dialogz");
    this.isDialogOpen = false;
    console.log(this.form.value);
  }

几个注意的地方。

1,子组件的ok,cancel的事件一定要给父组件传递, 父组件的ok,cancel的方法一定要控制他自己变量的ture,false的设置, 不然会导致子组件只会弹出一次,第二次点击没有任何反应。

2.  [content]="myFormContent",myFormContent是一个ng-template的模板ID,写法注意一下

3.关于ng-content的用法详细再记录一下

当我们在自定义组件的模板中使用<ng-content>指令时,它允许我们在父组件中引用该组件并插入任意内容。这使得我们可以在父组件中根据需要动态添加和传递内容给自定义组件。

在上面的示例代码中,父组件使用了自定义的弹出框组件app-custom-modal,并在其中使用了<ng-content></ng-content>。这样,当父组件使用app-custom-modal组件时,在<ng-content></ng-content>的位置,父组件中传入的内容将会被动态插入到自定义组件的模板中。

具体来说,当父组件中使用<app-custom-modal>标签时,它将被视为一个自定义组件的实例。在自定义组件的模板中,<ng-content></ng-content>表示一个占位符,用于接收父组件中传入的内容。这样,父组件中的任何内容都可以通过<app-custom-modal>标签内部的形式传递给自定义组件。

例如,在父组件中有以下代码:

<app-custom-modal> <p>这是父组件中传入的内容</p> </app-custom-modal>

那么,在自定义组件的模板中,<ng-content></ng-content>将会被替换为<p>这是父组件中传入的内容</p>,从而实现了动态插入父组件传入的内容。

通过使用<ng-content>指令,我们可以在自定义组件中以灵活的方式接收和处理父组件传递的内容,从而实现更好的复用性和可定制性

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值