子组件接收到的 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()
装饰器将一个复杂类型属性传递给子组件时,实际上传递的是对该属性的引用。这意味着子组件中对该属性的修改会影响到原始值。
因篇幅问题不能全部显示,请点此查看更多更全内容
Copyright © 2019- efsc.cn 版权所有 赣ICP备2024042792号-1
违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com
本站由北京市万商天勤律师事务所王兴未律师提供法律服务