javascript - Pérdida de contexto al pasar una función desde el componente padre a la propiedad Input() del componente hijo

Estoy pasando una función desde mi componente padre, a la propiedad Input() de mi componente hijo.

El problema es que la función del padre se invoca en el componente hijo, y la palabra clave this ahora se refiere al contexto del componente hijo, en lugar del contexto del componente padre.

Aquí hay un ejemplo de lo que estoy haciendo en mi componente padre:

export class CustomerComponent implements OnInit {
    next(continuationToken: string): Observable<CustomerSearchResult> {
        console.log('invoked');
        return this.customerService.searchCustomersPaged("andrew");
    }
}

En la plantilla de mi componente padre (estoy pasando la función 'next' a través del parámetro de entrada llamado 'nextDelegate'):

<app-datatable [hidden]="!customersByFirstNameHasResults" [nextDelegate]="next" [serverSidePaging]="true" id="customersByFirstName" [showDeleteButton]="false" [showEditButton]="true" [responseModelObservable]="customersByFirstName"
      modelTypeName="customer" (editRow)="editCustomer($event)">
    </app-datatable>

Y luego, finalmente, en mi componente hijo, intento invocar el método pasado, pero el contexto es incorrecto.

export class DatatableComponent implements AfterViewInit, OnDestroy, OnInit {
  @Input() nextDelegate: (continuationToken: string) => Observable<CustomerSearchResult>;

private initializeDtOptions() {
// storing current class reference in a variable to use it in jQuery 

// function because we can't 
    //use arrow function as we might need both this' in the function
    if (this.serverSidePaging) {
      this.dtOptions = {
        pagingType: 'simple',
        serverSide: true,
        processing: true,
        pageLength: 10,
        deferLoading: 100, //this.totalRecords
        ajax: (p, callback) => {
          //called here
          that.nextDelegate("").subscribe(x => {
            callback({

            })
          });

        }
      };
    } else {
      this.dtOptions = {
        pagingType: 'full_numbers',
        columns: this.columnSettings
      };
    }
  }
}

Respuesta #1

Por el contexto, creo que te refieres a alcance. Esto es incorrecto debido a cómo está definida tu función.

Intenta usar:

export class CustomerComponent implements OnInit {
    public next = (continuationToken: string): Observable<CustomerSearchResult> => {
        console.log('invoked');
        return this.customerService.searchCustomersPaged("andrew");
    }
}

Dicho esto, esto parece ser un poco problemático. Sugeriría usar salidas o inyectar un servicio para manejar esto.