3

I'm using different module so it can be used in lazy loaded modules. here is my service file.

import {NgModule, Injectable } from '@angular/core'
import {Subject} from 'rxjs/Subject';

@Injectable()
export class ChangeEventService {

    public invokeEvent:Subject<any> = new Subject();
    //    localId:any = { name:'', eventId:0, orgId:0};
    constructor() {
     
    }

    public callComponent(currentId:any):void {
      console.log("Invoked");
      this.invokeEvent.next({localId:currentId});
    }
}

@NgModule({
  imports: [   ],
  exports : [
  ],
  providers: [ ChangeEventService ],
})
export class ChangeEventModule { }

subscription to Rxjs subject is only changing in the component/service which changes It.

export class xyz {
    constructor(private change: ChangeEventService) { 
                    this.change.invokeEvent.subscribe((value) => {
                        this.event = value.localId;
                        console.log("I'm chnaged...!!");
                    });
    }

    
    anyFunction(eventdata:any) {
            this.change.callComponent(eventdata);
     }
 }

I get the updated value only In the component which change the value of invokeEvent.

YASH DAVE
  • 1,066
  • 12
  • 25
  • Can you check how often the constructor is run. You might have multiple instances of the `ChangeEventService`. – Philipp Feb 16 '17 at 09:41
  • 1
    is `this.change.invokeEvent.callComponent(eventdata);` suppose to be `this.change.callComponent(eventdata);` – shusson Feb 16 '17 at 09:44
  • @shusson: +1. Also, are you sure `ChangeEventService` is a singleton? Is it declared in `NgModule.providers` of a module that is **eagerly loaded** (vs lazily-loaded)? – AngularChef Feb 16 '17 at 09:49
  • @shusson I did mistake in copying code here thx for pointing that out. – YASH DAVE Feb 16 '17 at 09:52
  • @Philipp I'm calling it in 2 different components of 2 different module where one is lazy loadedinside the router outlet of another module. will it create multiple instances? – YASH DAVE Feb 16 '17 at 09:53
  • @AngularFrance I'm importing ChangeEventModule in all lazy loaded modules. – YASH DAVE Feb 16 '17 at 09:54
  • @YASHDAVE. Hmmm. I'm assuming `ChangeEventModule` is also exporting things then? If you're importing `ChangeEventModule` only to make `ChangeEventService` available to your lazy-loaded modules, then there's no need. Providers have a global scope by default. – AngularChef Feb 16 '17 at 09:59
  • @AngularFrance okay I'll try that. SO I'll need to define it in one provider only? – YASH DAVE Feb 16 '17 at 10:01
  • Exactly! But it MUST BE in the providers of a module that is loaded *eagerly* at bootstrap (i.e. either `AppModule` or a module imported by `AppModule`). – AngularChef Feb 16 '17 at 10:32
  • @AngularFrance now i'm getting DI error and it says "Unhandled Promise rejection: No provider for ChangeEventService!" – YASH DAVE Feb 16 '17 at 10:40
  • In the providers of which module did you declare `ChangeEventService`? – AngularChef Feb 16 '17 at 11:20
  • @AngularFrance currently none. I've included it in bootstrap to make singleton but I guess this doesn't work in lazy load so now I'm trying to use "https://github.com/angular/material2/issues/1071" this method. will let u know if it works. – YASH DAVE Feb 16 '17 at 11:24
  • You lost me... `ChangeEventService` should be declared **the same way** it is in the code you provided. I only suggested that you moved the declaration to another module... – AngularChef Feb 16 '17 at 11:31
  • @AngularFrance that's not working since my all modules are lazy loaded. – YASH DAVE Feb 16 '17 at 11:33
  • Impossible. The root module (aka `AppModule`) is NEVER lazy-loaded. – AngularChef Feb 16 '17 at 11:34
  • @AngularFrance I know but that it's giving me DI error in lazy loaded modules. – YASH DAVE Feb 16 '17 at 11:35
  • @AngularFrance this is what i'm getting after following your steps. – YASH DAVE Feb 16 '17 at 11:43
  • Unhandled Promise rejection: Can't resolve all parameters for EventsComponent: ([object Object], ?). ; Zone: angular ; Task: Promise.then ; Value: Object { __zone_symbol__error: Error, fileName: Getter, lineNumber: Getter, columnNumber: Getter, message: Getter, name: Getter, stack: Getter, originalStack: Getter, zoneAwareStack: Getter, toString: createMethodProperty/props[key].value(), 4 more… } – YASH DAVE Feb 16 '17 at 11:44
  • Difficult to help you further without seeing the actual app – AngularChef Feb 16 '17 at 11:46
  • @AngularFrance can u give me ur email ID or mail me on yashndave@gmail.com I'll share my screen on teamviewer. thx in advance – YASH DAVE Feb 16 '17 at 12:14
  • @AngularFrance sorry for wasting ur time, I forgot to compile ts file after changes :P Now I'm removing my question – YASH DAVE Feb 16 '17 at 12:35
  • @AngularFrance It's working every time except 1st time. – YASH DAVE Feb 16 '17 at 12:59

1 Answers1

1

As @Philipp commented I was creating multiple instances of my service by providing it in multiple modules. And as suggested by @AngularFrance I declared in it provider of app.module(1st module of my app). than I was not getting updated value in any subscription ( except the one which was calling callComponent ) 1st time.So I used BehaviorSubject and gave it any random initial value. So now it's sending initial value to one component at initial time and than it's sending updated value to all subscribers when it's updated.

So I guess that solved my problem.

YASH DAVE
  • 1,066
  • 12
  • 25