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

Question

我正在制作一个弹出组件，我想在其他几个组件中使用它，因此我制作了一个 popup.service ，使该组件能够通过其他组件内的 *ngIf 加载。这给我带来了一个问题，因为 PopupComponent 是一个单独的实体，我不确定如何将数据从子组件(PopupComponent)传递到其各自的父组件。

Atm 加载在 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");
  }

和 ParentComponent.html:

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

它的加载就像一个魅力，问题在于关闭它。关闭按钮位于 PopupComponent 上，是否有一种有效的方法可以让子组件(PopupComponent)影响父组件中的变量，即。 ParentComponent.load_popup=false？

我的另一个想法是动态加载组件，但是我不知道如何做到这一点。我一直在使用 PopupService 并在其中添加类似的内容:

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

其中 this.popup_ref.destroy(); 理想情况下会销毁 PopupComponent，但是当我这样做时，我在 popup_ref 上得到了“无法读取未定义的属性”，我在声明它时遇到了麻烦，语法似乎有点棘手。

问题还在于我需要一个函数来加载组件，与 .destroy() 相反，如果可能的话，我更喜欢它而不是使用 *ngIf 加载和销毁。

编辑:仅通过在服务中使用 bool 值作为 *ngIf 的触发器来部分解决它，是否有办法在组件上执行函数加载和销毁？

Answer 1

您可以将 EventEmitter() 绑定(bind)到组件以调用父组件中的函数。

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

然后在您的应用程序弹出组件内:

@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')
}

重要的是要知道您可以将整个函数传递给绑定(bind)函数，甚至可以将变量从子函数传递回父函数:

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

顺便说一句，因为你使用的是 Angular；我建议考虑使用模态框来弹出对话框。您可以在这里看到一个很好的例子:

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