Question

我创建了一个名为UserEvents的服务

@Injectable()
export class UserEvents {

public evAuthenticated: EventEmitter<string> = new EventEmitter();

public AuthUserEvent(email: string) {
this.evAuthenticated.next(email);
  }
}

我在AppModule

中包含了这项服务

我有一个服务名称AuthService，包含UserEvents并发出：

this.userEvents.evAuthenticated.emit(email);

另一项服务

constructor(private userEvents: UserEvents){
this.userEvents.evAuthenticated.subscribe((data: string) => this.SetUser(data));
}

private SetUser(email: string) {
   this.logger.info('Event triggered with ' + email);
}

但是从未触发过这个嫌疑人。在列表中，从不调用SetUser。

这里有什么问题？

Answer 1

根据我对Angular 2（+）的了解，EventEmitters将被用作组件输出，即：

 @Output() myStringOutput = new EventEmitter<string>();

如果您的服务中需要触发事件，建议使用RxJS主题，如下所示：

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

@Injectable()
export class MyService {

  private _onMyEvent = new Subject<string>();
  public get onMyEvent(): Observable { return this._onMyEvent.asObservable(); }

  public trigger(value: string) {
    this._onMyEvent.next(value);
  }
}

在代码的其他地方，您可以执行以下操作：

this.myService.onMyEvent.subscribe((value: string) => console.log('Triggered!', value));
this.myService.trigger('Hello World')

Plunkr

Answer 2

改为使用Subject：

@Injectable()
export class UserEvents {

    public evAuthenticated = new Subject<string>();

    public AuthUserEvent(email: string) {
        this.evAuthenticated.next(email);
    }
}

保持订阅代码不变。

在我的答案中查看来自GünterZöchbauer的评论：https://stackoverflow.com/a/45710245/1791913

不应该在服务中使用EventEmitter。一个观察者或主题也是如此。 EventEmitter应该只用于 @Output（）秒。 EventEmitter只扩展了Subject（AFAIR），但是扩展了Angular 团队可以在不事先通知自定义实现的情况下进行更改仍然适用于@Output（）但可能会破坏其他用途，因为 @Output（）是EventEmitter唯一应该用于的东西。

Answer 3

感谢您的帮助，但Angular 4中并不需要这两者。我发现了问题：所谓的服务并不是自动实现的。我在app.component的构造函数中添加了服务，一切都开始工作了。

EventEmitter的Angular 4事件

3 个答案: