Use a service for child components without having to inject it in the constructor

Question

I want to use a service for getting information about the current coins the app supports.

Therefore I have created the Service: CoinsService

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

const coins = {
  "btc":"bitcoin",
  "ltc":"litecoin"
};

@Injectable()
export class CoinsService {

  getCoins(){
    return coins;
  }

  getSpecificCoin(coinShortcut: string) {
    return coins[coinShortcut];
  }
}

My user class looks like this:

import { CoinsService } from './coins.service';

export class User {
  constructor(public id: number, public balance: number, public coinsService: CoinsService) {
    console.log(coinsService.getCoins());
  }
}

Before the service if I wanted to create a user I did it like this: let userA = new User('1','200');

Now with the service I need to pass in the coinService at object creation: let userA = new User('1','200', coinService)

For wholeness I post also the app.component.ts:

import { Component } from '@angular/core';
import { User } from './user';
import { CoinsService } from './coins.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [CoinsService]
})
export class AppComponent {
  title = 'app';

  constructor(private coinsService: CoinsService){
      let userA = new User(1, 200, coinsService);
  }
}

Are there any other options to be able to use the service in the User class without "passing it down" to the component which actually needs it?

I would like to create users without explicitly telling it everytime for every user that it needs a CoinsService.

It should be the standard that every user that gets created has access to it.

Also the service should be able to be used in every component below the App.Component. That's why I entered the CoinssService in the providers array.

Any help is appreciated.

eko · Accepted Answer · 2017-11-15T10:41:21.037

You can make the method static and call it from everywhere

@Injectable()
export class CoinsService {

  static getCoins(){
    return coins;
  }

  getSpecificCoin(coinShortcut: string) {
    return coins[coinShortcut];
  }
}

import { CoinsService } from './coins.service';

export class User {
  constructor(public id: number, public balance: number) {
    console.log(CoinsService.getCoins());
  }
}

Be careful when using static properties though, they are like a global/shared property. If you change a static property, it will change in all of the instances of that class.

More info: What does the 'static' keyword do in a class?

score 0 · Answer 2 · answered Nov 15 '17 at 10:34

Don't pass the service itself, pass the url or the method to call in the coinService like "dollarUrl" "euroUrl" which can be used in your URL or function call. 'this.coinService.' + coinMethod + '(params)...

If you need coinService for every user, then use coinService in your userService constructor and call it from here..

Use a service for child components without having to inject it in the constructor

2 Answers2

Linked