Javascript EventEmitter的Emit方法不向订阅服务器发送值

因此，我试图通过一个服务连接两个组件，

LoaderComponent

和

AppComponent

与

LoaderService

，这样当应用程序获取数据时，就会出现一个加载器。但是，当我尝试使用

EventEmitter

向组件发出更改时，它们不会得到更改，而是在服务订阅时得到更改 就其自身而言，它可以得到改变

装载机服务

从'@angular/core'导入{EventEmitter，Injectable}；
@可注射（）
类装入器服务{
@输出更改：EventEmitter=新的EventEmitter（）；
私有状态：数字=0；
构造函数（）{
subscribe（state=>console.log（state））；
这是一个设置状态（1）
}
设置状态（状态：编号）{
this.state=状态；
this.change.emit（this.state）；
}
}
//显示未检测到服务外事件时的状态，还尝试了事件中的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);
  }
}

然后，这两个加载程序接收同一服务的不同副本，因为它们各自提供并注入自己的服务，所以它们不会看到彼此的事件

为了解决这个问题，您可以在应用程序组件中（而不是在加载器组件中）提供，这样它们就拥有相同的服务副本，因为这样父级就提供了它们各自注入的服务。如果您同时提供应用程序组件和加载程序组件，它们都会收到不同的副本

如果您在根目录（模块级）提供，那么注入服务的每个组件（不提供自己的组件）都将收到该服务的相同副本

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

首先

我将重构以使用主题，并通过使主题私有化和公开可观察的公共对象来保护您的主题，这限制了您的主题状态的修改方式，这不是必需的，但通常被认为是良好做法：

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

然后，这两个加载程序接收同一服务的不同副本，因为它们各自提供并注入自己的服务，所以它们不会看到彼此的事件

为了解决这个问题，您可以在应用程序组件中（而不是在加载器组件中）提供，这样它们就拥有相同的服务副本，因为这样父级就提供了它们各自注入的服务。如果您同时提供应用程序组件和加载程序组件，它们都会收到不同的副本

如果您在根目录（模块级）提供，那么注入服务的每个组件（不提供自己的组件）都将收到该服务的相同副本

---

提供服务的适当位置取决于您的应用程序的需要和特定服务的功能。

您需要在angular的某些组件中使用

LoaderService

来创建它，如果我们不使用该服务，angular将自动放弃它。注入

LoaderService

应用程序内组件，如下所示：

constructor（private\u loadService:LoaderService）{}

然后您将看到

console.log（）

---

此外，建议使用Rxjs中的Subject或Behavior Subject，而不是服务中的输出。

您需要在angular的某些组件中使用

LoaderService

来创建它，如果我们不使用服务，angular将自动放弃它。注入

LoaderService

应用程序内组件，如下所示：

constructor（private\u loadService:LoaderService）{}

然后您将看到

console.log（）

---

此外，建议使用Rxjs中的Subject或Behavior Subject，而不是服务中的输出。

因此

this.change.subscribe（state=>console.log（state））上的输入错误与此无关，对吗？另外，输出是
@output（）
很抱歉，输入错误，但在文件中可以。在这种情况下，设置一些示例非常好。。工作示例。。你可以轻松地在1点做一些事情。不要在服务上下文中使用事件发射器或输出，使用rxjs主题或行为子对象、输出和事件发射器专门用于组件事件和模板绑定2。如何/在何处提供此服务？在第1点检查这个链接：@ LBBYLYBEAN，我会考虑BRY60的评论。但是我在这里没有看到任何问题，因此
this.change.subscribe（state=>console.log（state））上的输入错误与此无关，对吗？另外，输出是
@output（）
很抱歉，输入错误，但在文件中可以。在这种情况下，设置一些示例非常好。。工作示例。。你可以轻松地在1点做一些事情。不要在服务上下文中使用事件发射器或输出，使用rxjs主题或行为子对象、输出和事件发射器专门用于组件事件和模板绑定2。如何/在何处提供此服务？在第1点检查这个链接：@ LBBYLYBEAN，我会考虑BRY60的评论。但是我在这里看不到任何问题，非常感谢我删除了
输出
，对于
事件发射器
，我使用了Subject我喜欢你，还删除了子组件提供商中LoaderService的重复项感谢我删除了
输出
，对于
事件发射器
，我使用了Subject我喜欢你坚持并删除了子组件提供者中LoaderService的副本谢谢，我不知道服务不使用输出谢谢，我不知道服务不使用输出
providers: [LoaderService]