Angular 9：销毁子组件后向父组件发送数据答案

【问题标题】：Angular 9: Sending data to parent component after destroying child componentAngular 9：销毁子组件后向父组件发送数据
【发布时间】：2020-10-01 01:36:46
【问题描述】：

子组件覆盖整个屏幕，所以有点击按钮后自行销毁的功能（想想就好像进入子组件查看详情，完成后关闭）。

父组件创建子组件（DetallePedidoComponent），并在此函数内部使用组件工厂：

 createComponent(id) {
        this.entry.clear();
        const factory = this.resolver.resolveComponentFactory(DetallePedidoComponent);
        this.renderer.setStyle(this.pedidoscontainer.element.nativeElement, 'display', 'none');
        this.componentRef = this.entry.createComponent(factory);
        this.componentRef.instance.cPedido(id);
        this.componentRef.instance.componentRef = this.componentRef;
                        }

子组件有一个 EventEmitter 和一个 OnDestroy 函数：

 export class DetallePedidoComponent implements OnInit, OnDestroy  {
        @Output() refrescar: EventEmitter<string> = new EventEmitter<string>();
        pedido;
        query: any = {};

        constructor(

            private pedidosService: PedidosService,
            private admService: AdmService,
            private loggedService: LoggedService,
            private dialog: MatDialog,
            private renderer: Renderer2) { }
)

 destroyComponent() {
        this.renderer.setStyle(this.pedidoscontainer.element.nativeElement, 'display', 'flex');
        this.componentRef.destroy();
    }

ngOnDestroy(){ 
         this.refrescar.emit('TEST');   
     }

我正在从子组件发出“TEST”。父级在 p 表上有“refrescar”事件（该表有一个图标，从本文开头触发 createcomponent 函数）：

 <div class="cell">
             <span class="cart" >
            <p-table #dt [value]="pedidos"  [rows]="10" [paginator]="true"
              [pageLinks]="3" [responsive]="true"
              [columns]="cols" 
              [globalFilterFields]="cols" 
              (refrescar) = "log($event)"
                     <mat-icon inline=true class="icon-display"  (click)="createComponent(pedido.Id)"
 matTooltip="Ver">visibility</mat-icon>
                   </span>

                 </td>
                 <td><span >{{ pedido.Nro }}</span></td>
                 <td><span *ngIf="isInRole('CLIENTE') || isInRole('ADM') || isInRole('ADMVENTAS')">{{ pedido.DescripcionDrogueria }}</span></td>
                 <td  ><span> {{  pedido.User.RazonSocial }}</span></td>
                 <td><span>{{ pedido.Estado   }} </span></td>
                 <td><span> {{ pedido.FechaCreacion |  date: 'dd/MM/yyyy hh:mm:ss'}} </span></td>

               </tr>
             </ng-template>
             <ng-template pTemplate="emptymessage" let-columns>
               <tr>
                 <td [attr.colspan]="columns.length+1">
                   No se encontraron registros.
                 </td>
               </tr>
          </ng-template>
            </p-table>
           </span>
           </div>
         </div>

Log 函数如下所示：

Log(m: string){
        console.log (m)     
    }

我的问题是父组件对子组件没有反应事件（日志功能正在接收任何东西）。我是新手，所以我不知道我做错了什么。有人可以帮我解决这里的问题？

【问题讨论】：

标签： angular typescript components parent-child child-process

【解决方案1】：

refrescar 事件绑定到DetallePedidoComponent 组件。如果您使用选择器调用组件，则需要在模板中绑定到它，或者在您的情况下您需要订阅它。试试下面的

createComponent(id) {
  ...

  this.componentRef.instance.refrescar.subscribe(log => this.log(log));
}

【讨论】：