EventEmitter的发送方法不向订阅者发送值

Question

So I am trying to connect two components through a service, LoaderComponent and AppComponent with LoaderService , so that when app fetches data a loader shows up. But when I try to use an EventEmitter to emit changes to the components they don't get the changes but when the service subscribes to itself, it can get the changes

LoaderService.ts

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

@Injectable()

class LoaderService {
  @Output change: EventEmitter<number> = new EventEmitter<number>();
  private state: number = 0;

  constructor() { 
     this.change.subscribe(state => console.log(state)); 
     this.setState(1) 
  }

  setState(state: number) {
     this.state = state;
     this.change.emit(this.state);
  }
}
// Shows state when  but outside of the service event is not detected, also tried EventEmitter from from events

I expect to get events from the LoaderService to subscribers

Answer 1

First thing, EventEmitters and Outputs don't belong in a service.

I will refactor to use subjects and also protect your subject by making it private and exposing a public observable, this limits how your subject state can be modified, this is not required but is generally considered good practice:

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

@Injectable()

class LoaderService {
  private change: Subject<number> = new Subject<number>();
  change$: Observable<number> = this.change.asObservable();
  private state: number = 0;

  constructor() { 
     this.change$.subscribe(state => console.log(state)); 
     this.setState(1) 
  }

  setState(state: number) {
     this.state = state;
     this.change.next(this.state);
  }
}

Second, this is likely an issue with how you provide your service. If you have an app component template like:

<loader-component></loader-component>
<loader-component></loader-component>

with 2 loader components side by side, and the loader component has a providers array like:

providers: [LoaderService]

then these 2 loaders are receiving different copies of the same service as they each provide and inject their own, so they will not see each other's events.

To remedy this, you provide instead in the app component (and not in the loader component) so they have the same copy of the service, because then the parent is providing the service that each of them inject. If you were to provide in both app component and loader component, they would all receive a different copy.

If you provide at root (module level) then every component that injects the service (and doesn't provide it's own) will receive the same copy of that service.

The appropriate place to provide a service is dependent on your app's needs and the function of the particular service.

Answer 2

You need to use LoaderService in some component for angular to create it, if we do not use the service any where angular will automatically discard it. Inject LoaderService in app component like below:

constructor(private _loadService: LoaderService) {} and then you will see the console.log() .

Also, it is recommended to use either Subject or Behavior Subject from Rxjs instead of Output in a service.