Dynamic function call for service in typescript

Question

I am working on Angular2 project in which i need to generate dynamic function which will be able to call the service provided under the service class. The service class has some 10 get functions as the following.

eg:

my service class

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

@Injectable()
export class service {

  constructor() { }

  get function1(){
    return 1;
  }

  get function2(){
    return 2;
  }

  get function2(){
    return 3;
  }
}

I am trying to create a function which take parameter as the function name and return the corresponding answer.

eg:

my app.component.ts

import { Component} from '@angular/core';
import {service} from "./service";

@Component({
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers : [service]
 })

 export class AppComponent(){

  constructor(private _service:service){}

  let one = getVal(function1); /// This should return 1
  let two = getVal(function2); /// this should return 2

  getVal(val){
     return this._service.val; // but i am getting error val not exist on type service
    }

}

Is their any solution for this since it will help me to reduce my code and performance.

Thanks in advance

how you are differentiating each one

Aravind
– Aravind

2017-04-17 17:35:26 +00:00
Commented Apr 17, 2017 at 17:35 — Aravind
– Aravind, Commented Apr 17, 2017 at 17:35
function names are different for all the functions

skid
– skid

2017-04-17 17:39:58 +00:00
Commented Apr 17, 2017 at 17:39 — skid
– skid, Commented Apr 17, 2017 at 17:39
can you elaborate.

Aravind
– Aravind

2017-04-17 17:42:36 +00:00
Commented Apr 17, 2017 at 17:42 — Aravind
– Aravind, Commented Apr 17, 2017 at 17:42

Estus Flask · Accepted Answer · 2017-04-17 17:48:56Z

8

function1, etc are not just 'get functions' - they are property accessor methods.

Instead, it likely should be

let one = getVal('function1');

and

getVal(val){
 return this._service[val];
}

answered Apr 17, 2017 at 17:48

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kenan Banks · Accepted Answer · 2017-04-17 17:45:16Z

3

A little difficult to to tell what you're asking, but this may help.

class MyService {
 get function1() {
   return 1;
 }
  get function2() {
   return 2;
 }
  get function3() {
   return 3;
 }
}

const service = new MyService();

const getValFactory = service => name => service[name];
const getVal = getValFactory(service);

// Use strings, not unquoted function names.
console.log(getVal('function1'));
console.log(getVal('function2'));
console.log(getVal('function3'));

answered Apr 17, 2017 at 17:45

Kenan Banks

213k36 gold badges160 silver badges176 bronze badges

Comments

tmorell · Accepted Answer · 2017-11-10 01:37:42Z

2

You can use "any" to bypass the TypeScript strong typing checking.

return (this.service as any)[val]

class Service {
	constructor() {}
	get function1() {
		return 1;
	}
	get function2() {
		return 2;
	}
	get function3() {
		return 3;
	}
}

class AppComponent {
	constructor(private service: Service) {}
	getVal(val: string) {
		return (this.service as any)[val];
	}
}

const service = new Service();
const app = new AppComponent(service);
console.log(app.getVal("function1"));
console.log(app.getVal("function2"));
console.log(app.getVal("function3"));

answered Nov 10, 2017 at 1:37

tmorell

5696 silver badges14 bronze badges

Comments

Praveen RL · Accepted Answer · 2022-08-24 07:55:18Z

Add a method to return the corresponding method with switch statement and bind(this).

service.ts

export class DynamicApiCallService {
    constructor(private http: HttpClient) { }

    dynamicMethods(method: string) {
        switch (method) {
            case 'one': return this.one.bind(this);
            case 'two': return this.two.bind(this);
            case 'three': return this.three.bind(this);
        }
    }

    one(id: string) {
        return this.http.get<any>(`one/${id}`);
    }

    two(id: string) {
        return this.http.get<any>(`two/${id}`);
    }

    three(id: string) {
        return this.http.get<any>(`three/${id}`);
    }
}

component.ts

this.dynamicApiCallService.dynamicMethods('one')(id).subscribe(response => {
    console.log(response);
    // Write your logic
})

Collectives™ on Stack Overflow

Dynamic function call for service in typescript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related