Question

我正在制作一个要在其他多个组件中使用的弹出式组件，因此我制作了一个popup.service，使该组件可以通过* ngIf加载到其他组件中。这对我来说是一个问题，因为PopupComponent是一个单独的实体，并且我不确定如何将数据从子组件（PopupComponent）传递到其相应的父组件。

自动取款机的加载在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进行加载和破坏。

编辑：仅通过在服务中使用布尔值作为* ngIf的触发器来部分解决该问题，是否有办法在组件上进行函数加载和销毁？

Answer 1

您可以将EventEmitter（）绑定到组件以调用父组件中的函数。

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

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

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

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

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

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

1 个答案: