Inject a service manually

Question

I have components B, C, D that inherit from class A.

I want to use a service in class A, but I don't know how to inject it, without injecting it from its children.

What I tried is a normal injection:

constructor(pageName: string = null, translate: TranslateService) { 

But when I do super() to construct class A, it throws an error because I didn't supply a second parameter.

Is there a way to inject into a parent class using Angular 2?

The Angular version I am forced to use is: 2.2.1

Some example case: I have many pages, each can show a loader. Instead of injecting the loader every time, and manage the loader from every page, I want to do:

export class BaseComponent {     constructor(private loader: LoadingService) {}          showLoading() {         this.loader.show();     } } 

And then to inherit from the component itself:

@Component({     selector: "page-login",     providers: [UsersService],     templateUrl: "login.html" }) export class LoginPage extends BaseComponent {     constructor(private usersService: UsersService) {         super();     } } 

Now LoginPage has a method showLoading from it's parent.

Answer 1

You could solve this by using a service locator service. That will easily allow you to get any service and use it in your parent classes without having to inject them via their children (as this can be a pain).

So to use this, create a simple class locator.service.ts:

import {Injector} from "@angular/core";  export class ServiceLocator {     static injector: Injector; } 

Import this service in your app.module.ts:

import {ServiceLocator} from './locator.service'; 

Then in the constructor of your module file (app.module.ts?), init this thing so you can use it anywhere:

export class AppModule {     constructor(private injector: Injector){    // Create global Service Injector.         ServiceLocator.injector = this.injector;     } } 

Now, to use it in your super class (your BaseComponent), simply import the ServiceLocator

import {ServiceLocator} from './locator.service'; 

and use it like:

export class BaseComponent {     public loader;     constructor() {         this.loader = ServiceLocator.injector.get(LoadingService)     }      showLoading() {         this.loader.show();     } } 

Now you have injected your service in an extendable parent and it's usable in your child components without having to pass it in the super().