代码之家 › 专栏 › 技术社区 › phpdroid

ngx引导BsModal从子组件关闭

ngx-bootstrap typescript angular javascript

phpdroid · 技术社区 · 7 年前

在将数据保存到数据库后,我需要关闭 Bs-modal 弹出窗口,并且我的保存在子组件中完成,因此我通过了 Bs模态 在子组件中,使用()输入并使用此处隐藏弹出窗口,但无法读取子组件中的我的模态

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();
  }
}

错误:发生意外错误!TypeError:无法读取未定义的属性“hide”

也尝试过

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

然后

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

任何帮助都会很好,谢谢!

2 回复 | 直到 7 年前

Muhammad Ahsan Ayaz 7 年前

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();
    }
}

希望这有帮助。

dhilt 7 年前

您需要传递事件而不是模态本身:

<app-edit-product [productId]="prodId" (onHide)="lgModal2.hide()" #child ></app-edit-product>

然后在子组件上处理它:

@Input()
onHide = new EventEmitter<void>();

doHide() {
  this.onHide.emit();
}