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

步骤：

弹出一个单独的父组件。
使用输出组件来跟踪子点击事件并激活父级使用事件发射器打开弹出窗口的方法。您也可以发送数据使用输出事件。

Answer 3

我希望这段代码对您有帮助：

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

弹出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>

弹出Component.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);
   }

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

3 个答案: