gpt4 book ai didi

javascript - ngx-bootstrap BsModal 从子组件关闭

转载 作者:行者123 更新时间:2023-11-28 14:40:01 28 4
gpt4 key购买 nike

我有一个场景,将数据保存到数据库后,我需要关闭 Bs-modal 弹出窗口,并且我的保存是在子组件中完成的,因此我传递了 Bs-modal code> 在子组件中使用 ()Input 并使用那里隐藏弹出窗口,但无法在子组件中读取我的模式

HTML 父组件

<div bsModal #lgModal2="bs-modal" class="modal fade" tabindex="-1" 
role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Edit Product</h4>
<button type="button" class="close pull-right" (click)="lgModal2.hide()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<app-edit-product [productId]="prodId" [modalId]="lgmodal2" #child ></app-edit-product>

</div>
</div>
</div>
</div>

子组件 TS

import { BsModalRef } from 'ngx-bootstrap';
export class EditProductComponent implements OnInit {
@Input() modalId:BsModalRef;
somefunction(){
this.modalId.hide();
}
}

Error:An Unexpected error occured!TypeError: Cannot read property 'hide' of undefined

也尝试过

@Output() closeModal:EventEmitter<Event> = new EventEmitter();
@Input() onHide:any;

然后

 somefunction(){
this.closeModal.emit(this.onHide);
}

任何帮助都会非常感谢!

最佳答案

HTML 父级:

<div bsModal #lgModal2="bs-modal" class="modal fade" tabindex="-1" 
role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title pull-left">Edit Product</h4>
<button type="button" class="close pull-right" (click)="hideModal()" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<app-edit-product [productId]="prodId" [modalId]="lgmodal2" (saveDone)="hideModal()" #child ></app-edit-product>

</div>
</div>
</div>
</div>

子组件 TS:

export class EditProductComponent implements OnInit {
@Output() saveDone: EventEmitter<any> = new EventEmitter<any>();
somefunction(){
this.saveDone.emit();
}
}

父组件 TS:

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';
export class ParentComponent implements OnInit {
@ViewChild('lgModal2') lgModal2: ModalDirective;
hideModal(){
this.lgModal2.hide();
}
}

希望这有帮助。

关于javascript - ngx-bootstrap BsModal 从子组件关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48340509/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com