extemitter的发射方法不会向订户发出值

Question

因此，我正在尝试通过LoaderComponent和AppComponent将两个组件与LoaderService连接两个组件，以便当App获取数据时，加载程序会显示。但是，当我尝试使用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

您需要在某些组件中使用LoaderService来创建它，如果我们不使用Angular会自动丢弃它的任何服务。在应用程序组件中注入LoaderService如下：

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

另外，建议使用RXJS而不是在服务中输出使用主题或行为主题。

Answer 2

第一件事，eventemitter和输出不属于服务。

我将重构使用主题，并通过使其私密并暴露公众可观察到的主题来保护您的主题，这限制了您的主题状态如何修改，这不是必需的，而是通常被认为是好的实践：

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个装载机组件并排，加载程序组件的提供程序数组如下：

providers: [LoaderService]

然后，这两个加载程序正在接收与每个人提供和注入自己的同一服务的不同副本，因此他们不会看到彼此的事件。

为了解决此问题，您可以在应用程序组件中提供(而不是在加载程序组件中(，因此它们具有相同的服务副本，因为那时父母正在提供每个注入的服务。如果您要在应用程序组件和加载程序组件中提供，它们都会收到不同的副本。

如果您在root(模块级别(提供，则每个注入服务(并且不提供它的组件(将接收该服务的相同副本。

提供服务的适当场所取决于您的应用程序的需求和特定服务的功能。