CODEWITHSUNDEEP
angulardependency-injectionsingletonangular2-services
sudhir
sudhir

Reputation: 1437

Unable to use Service as SingleTon object in Angular2 Final Release

The Service which I have and want to use throughout the application is 

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

@Injectable()
export class UserDetailsService {
    objUser: User = new User();
    testing: string;
    getData() {
        return this.testing;        
    }
    setData(my:string) {
        debugger;
        this.testing = my;
    }
}

Now I want to set the variable testing in one of my component 

import { Component } from '@angular/core';
import {UserDetailsService} from 'servicePath';

@Component({
    selector: 'some',
    templateUrl: 'someUrl',
    providers: [UserDetailsService]
})
export class LoginComponent {
constructor(private _Service: UserDetailsService)

}
onClick(){
_Service.set("my Value");
}

Now in another component if I want to use this field testing , I'm getting undefined

import { Component } from '@angular/core';
import {UserDetailsService} from 'URL';

@Component({
    selector: 'somee1',
    templateUrl: 'url'
})
export class LandingComponent {
    constructor(private _UserService: UserDetailsService) {
        debugger;
        var test = _UserService.getData();
        debugger;
    }
}

in my app module I have this 

@NgModule({
    imports: ...,
    declarations:...,
    bootstrap: [AppComponent],
    providers: [HttpService, UserDetailsService]}]
})

Upvotes: 2

Views: 916

Answers (2)

John Baird
John Baird

Reputation: 2676

To create a shared module:

Create the shared module:

@NgModule({
  imports: [CommonModule, RouterModule, ReactiveFormsModule ],
  declarations: [ ErrorMessagesComponent ],
  exports: [ CommonModule, ReactiveFormsModule, HttpModule, RouterModule, ]
})

export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ AuthorizationService, LoginService, AuthGuardService ]
    };
  }
}

In the app.module.ts (notice the sharedModule.forRoot()):

@NgModule({
    imports: [ BrowserModule, RouterModule.forRoot(appRoutes), SharedModule.forRoot(), 
               HomeModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ],
    providers: [ appRoutingProviders ]

})

then in every module that uses the shared module:

@NgModule({
    imports: [ SharedModule, routing],
    declarations: [ HomeComponent], 
    bootstrap: [ HomeComponent ],
    providers: [ ]

})

Upvotes: 0

Günter Zöchbauer
Günter Zöchbauer

Reputation: 658047

Remove UserDetailsService from providers of the component and keep it only in providers of @NgModule()

Angular2 DI maintains an instance per provider. If you provide it multiple times you get multiple instances. If you provide it at a component, you get an instance for any occurrence of that component in your application.

Providers added to NgModule are all added to the root scope and if a service is provided more than once, only a single instance is is added to the root scope.

Lazy loaded modules get their own scope, therefore this is a different case than the one explained before.

Upvotes: 2

Related Questions