0

我有一个父组件并从此组件调用父模态。在父模态中，我想调用一个位于不同组件中的子模态。但是当单击按钮并触发事件以隐藏父项然后显示子 ngx boostrap 模态时，子模态也会关闭。如何在不同的组件中隐藏父模态以显示子模态？

在父组件html中；

<div bsModal #parentModal="bs-modal" class="modal fade" tabindex="-1" [config]="modalOptions" role="dialog"
  aria-labelledby="dialog-child-name" (onHidden)="hideParent()" id="parent">
  <div class="modal-info modal-dialog" role="document">
    <div class="modal-content" >
      <div class="modal-header popupHeader">
      </div>
      <div class="modal-body">
       <child-component (hideParent)="hidemodal()"> </child-component>
 </div>
 </div>

在父组件 ts

  @ViewChild('parentModal', { static: false }) parentModal: ModalDirective;

hidemodal(){
this.parentModal.hide()

}

在子组件 html 中：

<button click = "openChild()">open child modal </button>


<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" [config]="modalOptions" role="dialog"
  aria-labelledby="dialog-child-name" (onHidden)="hideParent()" id="parent">
  <div class="modal-info modal-dialog" role="document">
    <div class="modal-content" >
      <div class="modal-header popupHeader">
      </div>
      <div class="modal-body">
child modal
 </div>
 </div>

在子组件 ts

 @ViewChild('childModal', { static: false }) childModal: ModalDirective;
 
@Output() hideParent = new EventEmitter();

openChild() {
this.hideParent.emit({});
this.childModal.show();

}
4

0 回答 0