使用EventEmitter的Angular 4事件

Question

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

@Injectable()
export class UserEvents {

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

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

我将此服务包含在AppModule中的提供程序中

我有一个包含UserEvents和emits的服务名称AuthService：

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

但是暂停从来没有触发过。在list中，永远不会调用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ünter Zöchbauer对我的回答的评论：https://stackoverflow.com/a/45710245/1791913

EventEmitter不应该在服务中使用。可观察对象或主体也是这样做的。EventEmitter应该只用于@Output()。EventEmitter只是扩展了Subject (AFAIR)，但Angular团队可以在没有事先通知的情况下将其更改为自定义实现，该实现仍然适用于@Output()，但可能会破坏其他用途，因为@Output()是EventEmitter唯一应该使用的东西。

Answer 3

谢谢你的帮助，但在Angular 4中两者都不是必需的。我发现了问题: suscribe的服务没有自动实例化。我在app.component的构造函数中添加了该服务，一切都开始正常工作。