在单击不同组件中的按钮并在模态弹出窗口中绑定数据时，如何在Angular 5中显示Bootstrap模态弹出窗口

Question

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

<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
}

您可以在以下网址找到更多帮助：

步骤：

1. 使您的弹出式弹出式单独的父组件。

2. 使用输出组件跟踪儿童点击事件和解雇父母使用事件发射极打开弹出的方法。您也可以发送数据使用输出事件。

我希望此代码对您有帮助：

parentcomponent.html：

<div id="parentdiv">            
   <button type="button"  (click)="addEditHandler($event)"> Submit </button> 
     <popup *ngIf="showModal" (OnCloseModal)="closeModal()" 
     [getModelId]="modelDataItem" > 
     </popup>
</div>

parentcomponent.ts：

     public showModal: boolean = false;
        public modelDataItem: any = {};
    
        // Send Id for New or Edit ------------------------
   public addEditHandler({ dataItem }) {
     this.modelDataItem=(typeof dataItem=="undefined") ? {Id: 0} : {Id: dataItem.Id };
     this.showModal = true;
         }
     // Close Modal ---------------------------------
      closeModal() {
        this.showModal = false;
      }

popup component.html：

    <div class="modal" id="myModal">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-body p-0">
                 <button mat-button  (click)="onCancel()"> close Modal</button>
                   //your code ...
                </div>
            </div>
        </div>
    </div>

弹出组件.ts

// Get data From Parent ----------------------------------
      @Input() public set getModelId(_model: any) {
        if (_model != undefined) {
          //get data ...........
        }
      }
 // Close Modal ----------------------------------
   @Output() public OnCloseModal: EventEmitter<any> = new EventEmitter();
   onCancel() {
     this.OnCloseModal.emit(true);
   }