Angular 2 Init Service with Values

Question

i have an shared module with an resource service in it. In my app.module i want to import this module and init the resource service with values. So my components defined in share.module can use the resources (translations).

P.S. I don't want to init the resource service within providers of app.module. The share module should be self-contained.

share.module.ts

 @NgModule({
    declarations: [ ComponentA, ComponentB],
    providers: [ResourceService], ...

app.module.ts

import [ ShareModule ]

app.component.ts

ngOnInit()
{
    this.http.get("resource").subscribe(resource => {
       // init resource service of share module here
    }
}

Can you please tell me how i can achieve it?

Best regards

No. ShareModule is a module to define components. It should be a library. But i dont know how to do it yet ^_^. The components within it should not call API. — AngularChan
– AngularChan, Commented Mar 1, 2019 at 9:25

StepUp · Accepted Answer · 2019-03-01 09:35:53Z

2

As Angular documentation says:

The most common way to get a hold of shared services is through Angular dependency injection, rather than through the module system (importing a module will result in a new service instance, which is not a typical usage).

Create injectable service:

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


@Injectable({
  // we declare that this service should be created
  // by the root application injector.
  providedIn: 'root',
})
export class YourService {
  getYourData() { /* make here http call...;*/ }
}

Then you can use dependency injection in your constructor:

constructor(yourService: YourService) {
}

and you call anywhere this service:

this.http.get("resource").subscribe(resource => {
   // call your service
   this.fooData = yourService.getYourData();

}

answered Mar 1, 2019 at 9:35

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

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

Comments

Chrillewoodz · Accepted Answer · 2019-03-01 09:31:54Z

Use {providedIn: 'root'} for your service:

@Injectable({
  providedIn: 'root'
})

export class ResourceService {}

And remove it from providers.

Then create another class which will hold the configuration for the SharedModule:

// Change this for your needs
export abstract class SharedConfig {
  readonly api: string;
}

Then create a forRoot on your SharedModule class:

export class SharedModule {

  public static forRoot(configFactory, deps = []): ModuleWithProviders {

    return {
      ngModule: SharedModule,
      providers: [
        {provide: SharedConfig, useFactory: configFactory, deps: deps}
      ]
    };
  }
}

Then call it like:

imports: [SharedModule.forRoot({api: 'https://foo.com/api'})]

Now in your service you can inject this config like this:

constructor(private config: SharedConfig) {
  // logs 'https://foo.com/api'
  console.log(config.api);
}

This will allow you to get the values from the forRoot call.

Collectives™ on Stack Overflow

Angular 2 Init Service with Values

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related