Búsqueda de sitios web

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()">&nbsp;&nbsp;Edit</a>
    <a href="javascript:" *ngIf="showSaveLink" (click)="save()">&nbsp;&nbsp;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

Artículos relacionados