Angular 2 Setter and Getter

Question

I am attempting to create a service to parse data to different components on different routes.

If I call the follow service on the same component I get the result I require, but if I try to get the set results from another component the service returns undefined.

Here is my service:-

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

@Injectable()
export class TestService {

  public _test:any;

  set test(value:any) {
    this._test = value
  }

  get test():any {
    return this._test;
  }
}

I set the service like:-

this.testService.test = 3;

and I receive the the service data in my component using the following:-

console.log(this.testService.test)

As mention before this works absolutely fine if I am communicating within the same component, I have the same imports, providers and constructor.

Also just a note the components are sibling components

Would anybody be able to help or point me in the right direction it would be very appreciated.

If you require any extra code please let me know.

How are your registering the service? In the component? In the module? Could you show the code showing the providers array you are using to register the service? — DeborahK, Jul 03 '17 at 16:50
I am registering the service in the component with the following providers: [TestService], in my constructor I have private testService:TestService, and importing it with import {TestService} from '../../../shared/services/test/test.service'; — Tony Hensler, Jul 03 '17 at 16:55
@TonyHensler, are you sure they are liblings? [This plunker](https://plnkr.co/edit/ANgduQg230dNWLdAFtlm?p=preview) shows that you cannot inject the service defined in providers of the sibling components — Max Koretskyi, Jul 03 '17 at 17:35
@Maximus 100% sure they are siblings. How would I be able to achieve what I am trying to do if I am unable to use a service to share variables to sibling components? — Tony Hensler, Jul 03 '17 at 17:39
@TonyHensler, check the plunker, is it how you have them setup? Or the `TestService` defined on the providers of the parent component for these sibling components? — Max Koretskyi, Jul 03 '17 at 17:40
I still have the problem... check : https://stackoverflow.com/questions/47005093/adding-a-second-animation-using-click-angular/47005397?noredirect=1#comment80957461_47005397 — Alex, Oct 29 '17 at 23:09
BTW what's the point in implementing properties and using a public field? — Chris Hermut, Jun 20 '18 at 07:13

score 10 · Accepted Answer · answered Jul 03 '17 at 17:51

If you want to share a service across components that are not children of the parent component, you need to register the service in the module, not in the component. When you register a service within a component, it is only available to that component and its children.

Something like this:

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    StarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [ TestService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

score 1 · Answer 2 · answered Sep 05 '18 at 05:24

1

If you are trying to interact between two components which are from different modules, then you have to import your service into the app module(i.e main module), in this way get method does not return

answered Sep 05 '18 at 05:24

arun kumar

1,151
1
11
25

score 0 · Answer 3 · answered Jul 03 '17 at 18:05

Try initializing testService var like this code inside of the constructor in your Component.ts tha could work if the undefined var is "testService".

constructor (private testService : TestService ){
      //at this time testService its already initialized.
     console.log(this.testService.test);
}

Angular 2 Setter and Getter

3 Answers3

Linked