Angular-动态销毁组件* ngIf和ComponentRef

Question

I'm making a pop-up component that I want to use in several of my other components, so I made a popup.service that enable the component to be loaded through *ngIf inside other components. This is creating a problem for me since the PopupComponent is a separate entity and I'm unsure how to pass data from the child component(PopupComponent) to its respective parents.

Atm the loading looks like this in ParentComponent.ts:

public openPopup(order_id: string, invoice_id: string): void{
      this.load_popup=this.popupService.openPopup(order_id, "selected_order", invoice_id, "selected_invoice");
  }

And ParentComponent.html:

<app-popup *ngIf="load_popup"></app-popup>

And it loads like a charm, the problem is in closing it. The close button is located on the PopupComponent, is there an efficient way to have the Child Component (PopupComponent) to affect a variable in the Parent Component ie. ParentComponent.load_popup=false ?

My other thought was dynamically loading the component, however I have no idea on how to do that. I was fidgeting around with using the PopupService and putting something like this in it:

import { Injectable, ComponentRef } from '@angular/core';

import {PopupComponent} from '../popup/popup.component';

@Injectable({
  providedIn: 'root'
})
export class PopupService {
  popup_ref: ComponentRef<PopupComponent>

  constructor(
  ) { }

  //Implemented in orderoverviewcomponent, invoicecomponent, and placeordercomponent
  public openPopup(id1:string, storage_label1:string, id2:string, storage_label2:string): Boolean{
    if (id1){
      localStorage.setItem(storage_label1, JSON.stringify(id1));
    }
    if (id2){
      localStorage.setItem(storage_label2, JSON.stringify(id2));
    }
    this.popup_ref.initiate(); //this line is a made up example of loading the component
    return true;
  }
  public closePopup(storage_label1: string, storage_label2:string): Boolean{
    if(storage_label1){
      localStorage.removeItem(storage_label1);
    }
    if(storage_label2){
      localStorage.removeItem(storage_label2);
    }
    this.popup_ref.destroy();
    return false;
  }
}

Where this.popup_ref.destroy(); would ideally destroy PopupComponent, but when I did that I got a "cannot read property of undefined" on the popup_ref, I'm having trouble declaring it, the syntax seems a bit tricky.

The problem also remains that i need a function to load the component, the opposite of .destroy(), if this is possible I would much prefer it over loading and destroying with *ngIf.

Edit: Partially solved it by just using a boolean in the service as the trigger for *ngIf, is there a way to do a function load and destroy on a component still?

Answer 1

You can bind an EventEmitter() to your component to invoke a function in the parent component.

<app-popup [onClose]="load_popup = false" *ngIf="load_popup"></app-popup>

Then inside of your app-popup component:

@Output onClose = new EventEmitter();

public closePopup(/* code emitted for brevity */) {
    /* code emitted for brevity */
    this.onClose.emit(); //Call the parent function (in this case: 'load_popup = false')
}

It's important to know that you can pass entire functions to the bound function, and you can even pass variables back to the parent from the child:

[onClose]="myFunction($event)"
this.onClose.emit(DATA HERE);

As an aside, since you're using Angular; I would suggest looking into using Modals for popup dialogue boxes. You can see a good example here:

https://ng-bootstrap.github.io/#/components/modal/examples