Inject a service manually

by

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().

More Related Contents:

  1. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  2. How to detect a route change in Angular?
  3. Adding a HTTP header to the Angular HttpClient doesn’t send the header, why?
  4. Angular2 change detection: ngOnChanges not firing for nested object
  5. How to go back last page
  6. Angular 2 – innerHTML styling
  7. Angular2 multiple router-outlet in the same template
  8. angular 2 sort and filter
  9. Router Navigate does not call ngOnInit when same page
  10. Angular 2 change event on every keypress
  11. Set focus on element
  12. Angular2 – FormControl Validation on blur
  13. How to bind to data-* attribute in angular2? [duplicate]
  14. Angular2: How is ngfor expanded
  15. Angular 2: Iterate over reactive form controls
  16. Multiple canActivate guards all run when first fails
  17. Can’t reload/refresh active route
  18. Dynamic classname inside ngClass in angular 2
  19. Error trying to diff ‘[object Object]’ in Angular
  20. Error: supportsScrollBehavior is not declared configurable
  21. Differences between value and ngValue in Angular 5
  22. Best method to set different layout for different pages in angular 4
  23. Rxjs Retry with Delay function
  24. Docker container doesn’t reload Angular app
  25. NX MFE angular module federation not able to access remote micro front end
  26. @HostBinding and @HostListener: what do they do and what are they for?
  27. @angular/material/index.d.ts’ is not a module
  28. What is pipe for in RxJS?
  29. How to use reportProgress in HttpClient in Angular? [duplicate]
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment