Call the reference of a method

Question

I don't know how to phrase this so excuse the weird title.

I am attempting to pass a method to a property of a typescript class, and when that property is called, the original method assignment will be called.

Here is that typescript class, notice the 'getMethod' property.

export class PagingConfiguration{
    getMethod: any;
    sortBy: string;
    sortAsc: boolean;

    constructor(getMethod: any, sortBy: string, sortAsc: boolean) {
        this.getMethod = getMethod;
        this.sortBy = sortBy;
        this.sortAsc = sortAsc;
    }
}

The class above is is used in my paging service. The service takes an instance of that class, and can execute the 'getMethod' property.

Here is that code, notice the 'getData' method of the class:

import { Injectable } from '@angular/core';

import { PagingConfiguration } from '../models/paging-configuration'

@Injectable()
export class PagingService {

    private pagingConfiguration : PagingConfiguration;
    private currentPage: number;

    addPager(pagingConfiguration : PagingConfiguration) : PagingService {
        this.pagingConfiguration = pagingConfiguration;
        this.currentPage = 1;
        return this;
    }

    getData() {
        return this.pagingConfiguration.getMethod({ currentPage: this.currentPage });
    }

    getNextPage() {
        this.currentPage += 1;
        this.getData();
    }   


}

Finally, I have a angular component, where the paging service is generated. On init of the component, the paging service called the getData method which calls the 'getMethod' property of pagingConfig class.

Here is the component code

import { Component, OnInit } from '@angular/core';

import { User } from '../../models/user';
import { PagingConfiguration } from '../../models/paging-configuration';

import { UserService } from '../../services/user-service';
import { PagingService } from '../../services/paging-service';

@Component({
    selector: 'user-search',
    templateUrl: './user-search.component.html',
    styleUrls: ['./user-search.component.css']
})
export class UserSearchComponent implements OnInit {
    users: User[] = [];

    private pager: PagingService;

    constructor(private userService: UserService, private pagingService: PagingService) { }

    ngOnInit(): void {
        this.pager = this.pagingService.addPager(new PagingConfiguration(this.loadUsers, 'Created', false));
        this.pager.getData();
    }

    loadUsers(currentPage: number) {
        this.userService.getUsers(currentPage).then(users => {
            this.users = users
        });
    };
}

My problem is that when the getMethod property is called, it'll execute loadUsers of the component class which is right - however, that method uses the this.userService of the component.

EDIT

So, Ive attempted to bind an instance of the compoennt to the getMethod call but didn't seem to work.

getData() {
    return this.pagingConfiguration.getMethod({self: this.pagingConfiguration.component,  currentPage: this.currentPage }).bind(this.pagingConfiguration.component);
}

Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — jonrsharpe, Oct 06 '17 at 15:19
@jonrsharpe Tried using the bind thing. didn't work unfortunately — Ben Donnelly, Oct 06 '17 at 15:48
Well no, you’re binding *the result of calling the function*, which is unlikely to solve the problem that you can’t call the function and get that result. — jonrsharpe, Oct 06 '17 at 15:58

score 0 · Accepted Answer · answered Oct 08 '17 at 02:37

Change the loadUsers method to this:

loadUsers = (currentPage: number) => {
    this.userService.getUsers(currentPage).then(users => {
        this.users = users
    });
};

By defining the function with the arrow function syntax, the function will be executed in the context of the UserSearchComponent

Call the reference of a method

1 Answers1