angular - Angular2 - Ag Grid - Obtener instancia principal en el componente del renderizador de celdas
Estoy utilizando Ag Grid para mostrar una lista de elementos en mi proyecto. He implementado Ag Grid con colDef para la cuadrícula como se muestra a continuación
custom.component.ts
ComponentePersonalizado
//definición de columna array
[
{
headerName: "Actions",
field: "action",
width: 100,
cellRendererFramework: ActionRendererComponent,
},
]
ComponenteRenderizadorDeAcción
import {Component} from '@angular/core';
import {AgRendererComponent} from 'ag-grid-ng2/main';
@Component({
selector: 'action-cell',
template: `
<a href="javascript:" *ngIf="showEditLink" (click)="edit()"> Edit</a>
<a href="javascript:" *ngIf="showSaveLink" (click)="save()"> Save</a>
<a href="javascript:" *ngIf="showCancelLink" (click)="cancel()">Cancel</a>
`
})
export class ActionRendererComponent implements AgRendererComponent {
public edit(){
..some logic here
}
public save(){
..some logic here
}
public cancel(){
..some logic here
}
}
Ahora el problema es que no puedo acceder a la instancia principal CustomComponent en ninguna de las funciones de ActionRenderer como save(), edit(), cancel(). ¿Cómo puedo pasar la instancia principal al componente ActionRenderer?
Respuesta #1
En tu componente padre, mientras inicializas la cuadrícula, asegúrate de agregar el siguiente código en su constructor:
import {GridOptions} from "ag-grid";
constructor(){
this.gridOptions = <GridOptions>{
context: {
componentParent: this
}
};
}
En tu plantilla asegúrate de incluir gridOptions
<ag-grid-angular #agGrid [gridOptions]="gridOptions">
Asegúrate de seguir los pasos anteriores. En tu componente renderizador de celdas, intenta registrar los parámetros. Deberías poder obtener esto.params.context.componentParent.
Para referencia adicional: Ag-grid padre-hijo
