Angular9:子组件销毁后向父组件发送数据
Angular 9: Sending data to parent component after destroying child component
子组件覆盖了整个屏幕,所以它有点击按钮后自行销毁的功能
(可以想象成进入子组件查看详情,完成后关闭)。
父组件创建子组件 (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-table 上有 "refrescar" 事件(这个 table 有一个图标,从这个 post 的开始触发 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(m: string){
console.log (m)
}
My problem is that the parent component is not reacting to the child´s
event (The Log function is recieving anything). Im new to this so i dont know what did i do wrong. Can someone
help me reach the issue here?
refrescar
事件绑定到 DetallePedidoComponent
组件。如果您使用选择器调用组件,则需要在模板中绑定到它,或者在您的情况下需要订阅它。尝试以下
createComponent(id) {
...
this.componentRef.instance.refrescar.subscribe(log => this.log(log));
}
子组件覆盖了整个屏幕,所以它有点击按钮后自行销毁的功能 (可以想象成进入子组件查看详情,完成后关闭)。
父组件创建子组件 (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-table 上有 "refrescar" 事件(这个 table 有一个图标,从这个 post 的开始触发 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(m: string){
console.log (m)
}
My problem is that the parent component is not reacting to the child´s event (The Log function is recieving anything). Im new to this so i dont know what did i do wrong. Can someone help me reach the issue here?
refrescar
事件绑定到 DetallePedidoComponent
组件。如果您使用选择器调用组件,则需要在模板中绑定到它,或者在您的情况下需要订阅它。尝试以下
createComponent(id) {
...
this.componentRef.instance.refrescar.subscribe(log => this.log(log));
}