typescript - Angular 9: Skicka data till föräldrakomponent efter att ha förstört barnkomponent

Barnkomponenten täcker hela skärmen, så den har en funktion för att förstöra sig själv efter att man klickat på en knapp (Tänk på det som att gå in i barnkomponenten för att se detaljer och sedan stänga den efter att man är klar).

Föräldrakomponenten skapar barnet (DetallePedidoComponent) med en komponentfabrik inom denna funktion:

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

Barnkomponenten har en EventEmitter och en OnDestroy-funktion:

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

Jag sänder ut "TEST" från barnkomponenten. Föräldern har "refrescar"-händelsen på en p-table (Denna tabell har en ikon som utlöser createcomponent-funktionen från början av detta inlägg):

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

Och Log-funktionen ser ut så här:

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

Mitt problem är att föräldrakomponenten inte reagerar på barnets händelse (Log-funktionen tar emot ingenting). Jag är ny på detta, så jag vet inte vad jag gjorde fel. Kan någon hjälpa mig att hitta problemet här?

Svar #1

Händelsen refrescar är bunden till komponenten DetallePedidoComponent. Du behöver antingen binda till den i mallen om du anropar komponenten med selektorn, eller i ditt fall behöver du prenumerera på den. Prova följande

createComponent(id) {
  ...

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

Relaterade artiklar