如何在单击不同组件中的按钮时以角度5显示引导模式弹出窗口并在模态弹出窗口中绑定数据

Question

我有两个组件，在一个组件中我有一个按钮，在其他组件我有一个弹出窗口，它是bootstrap模式弹出窗口。我需要弹出这个模态弹出窗口，并在单击此按钮时绑定该弹出窗口中的数据。你们能告诉我一个示例或示例项目如何在两个组件之间显示弹出和数据传输。

<div id="parentdiv">            
            <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" (click)="submit()">Submit</button> 
     <popup></popup>
</div>

  ngOnInit(){    
    this.commservice.attachSubscribers(['popupevent']);     
     this.commservice.getSubscriber('popupevent').subscribe((data) => {
       this.rolesList = data; 
       const modalRef = this.modalservice.open(guidanceComponent);
       modalRef.componentInstance.data = this.rolesList;
     })      
  }

Answer 1

在您的父组件中

@ViewChild(Popup) popup: Popup;
click() {
  this.popup.showModal(newData)
}

你的孩子组件

showModal(newData) {
this.oldData = newData;
//code to show modal etc
}

您可以在以下网址找到更多帮助：https://alligator.io/angular/viewchild-access-component/

Answer 2

脚步 ：

1. 使您的弹出窗口成为单独的父组件。
2. 使用输出组件跟踪子单击事件，并使用事件发射器打开弹出方法。您也可以使用输出事件发送数据。