EventEmitter的發送方法不向訂閱者發送值

Question

因此，我試圖通過服務將兩個組件（ LoaderComponent和AppComponent與LoaderService ，以便在應用程序獲取數據時顯示一個加載器。 但是，當我嘗試使用EventEmitter向組件發出更改時，它們沒有得到更改，但是當服務訂閱自身時，它可以獲取更改

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

我希望從LoaderService到訂閱者獲取事件

Answer 1

首先， EventEmitters和Outputs不屬於服務。

我將重構使用主題，並通過將其設置為私有並公開可見的方式來保護您的主題，這限制了如何修改您的主題狀態，這不是必需的，但通常被認為是好的做法：

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);
  }
}

其次，這可能與您提供服務的方式有關。 如果您有類似以下內容的應用程序組件模板：

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

具有2個並排的loader組件，並且loader組件具有一個provider數組，例如：

providers: [LoaderService]

則這兩個加載器將接收各自提供的同一服務的不同副本，並注入自己的副本，因此它們將不會看到彼此的事件。

為了解決這個問題，您可以在app組件中提供（而不是在loader組件中），以使它們具有相同的服務副本，因為父級將提供它們每個注入的服務。 如果要同時提供應用程序組件和加載器組件，則它們都將收到不同的副本。

如果您在根目錄（模塊級別）提供，則每個注入服務的組件（不提供它自己的組件）將收到該服務的相同副本。

提供服務的適當位置取決於您的應用程序的需求和特定服務的功能。

Answer 2

您需要在某個組件中使用LoaderService來創建angular，如果我們不使用該服務，則angular會自動將其丟棄。 在應用程序組件中注入LoaderService ，如下所示：

constructor(private _loadService: LoaderService) {} ，然后您將看到console.log() 。

另外，建議在服務中使用Rxjs中的Subject或Behavior Subject，而不是Output。