为什么子组件接收到的modalRef是来自于父组件属性的引用?,@Input() modalRef: NzModalRef;

子组件接收到的 modalRef 是来自于父组件属性的引用。通过使用 @Input() modalRef: NzModalRef; 装饰器将 modalRef 声明为子组件的输入属性,可以让父组件传递模态框的引用给子组件。

在父组件中,当创建模态框并获得模态框引用后,通过将其赋值给子组件的 modalRef 属性,将模态框引用传递给子组件:

sendMessage() {
  const modal = this.modalService.create({
    // 模态框配置...
  });

  this.modalRef = modal;
}

然后,在子组件中,通过使用 @Input() 装饰器将 modalRef 声明为一个输入属性,以接收来自父组件的模态框引用:

import { Component, Input } from '@angular/core';
import { NzModalRef } from 'ng-zorro-antd/modal';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css']
})
export class ChildComponent {
  @Input() modalRef: NzModalRef;

  // 子组件可以使用父组件传递的 modalRef 引用进行操作
  closeModal() {
    this.modalRef.close();
  }
}

这样,父组件中创建的模态框引用就可以通过 modalRef 输入属性传递给子组件,并且子组件可以使用该引用来进行操作,如关闭模态框。

对于基本类型(如字符串)@Input() 装饰器将创建一个属性,该属性会接收父组件传递的值的副本,而不是引用。

为什么对基本类型产生的是副本,而复杂类型产生的是引用?

这是因为在 JavaScript/TypeScript 中,基本类型(如字符串、数字、布尔值等)是通过值传递的,而复杂类型(如对象、数组等)是通过引用传递的。

当使用 @Input() 装饰器将一个基本类型属性传递给子组件时,实际上会创建该属性的副本,并将副本的值传递给子组件。这意味着子组件中对该属性的修改不会影响原始值。

对于复杂类型,如对象或数组,它们是通过引用传递的。因此,当使用 @Input() 装饰器将一个复杂类型属性传递给子组件时,实际上传递的是对该属性的引用。这意味着子组件中对该属性的修改会影响到原始值。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

董厂长

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值