服务中定义的 angular2 事件没有被组件捕获

Question

我在我的 angular2 服务中使用 EventEmitter 触发一个事件。但是这个事件并没有被我的组件捕获。

我的服务（文件是 - 'app.service.ts'）：

import {EventEmitter, Injectable, OnInit} from "angular2/core";
@Injectable()
export class AppService{
  private _event:EventEmitter<string> = new EventEmitter();
  ngOnInit(){
    setTimeout(() => this._event.emit("hello"),1000);
  }
  getEventRef(){
   return this._event;
  }
}

我的组件（文件是'./app.component.ts'）：

import {Component, OnInit} from "angular2/core";
import {AppService} from "./app.service";

@Component({
selector: 'my-app',
template: '<h1>App</h1>',
providers: [AppService]
})
export class AppComponent implements OnInit{
  constructor(private _service:AppService){}
  ngOnInit(){
    _service.getEventRef()
      .subscribe(res => alert(res));
  }
}

但是我没有收到我应该在我的组件中获得的警报。我不确定该服务是否正在使用 .emit api 触发事件。

Answer 1

ngOnInit 钩子方法不能用于服务，只能用于组件。对于服务，您可以使用构造函数：

@Injectable()
export class AppService{
  private _event:EventEmitter<string> = new EventEmitter();
  constructor(){
    setTimeout(() => this._event.emit("hello"),1000);
  }
  (...)
}

另一个评论。最好将EventEmitter 仅用于组件通信。在您的情况下，请使用 Observable 或 Subject：

• 使用 Observable / Observer 类

  @Injectable()
  export class AppService{
    private _event:Observable<string> = Observable.create((observer:Observer) => {
      this._event$ = observer;
    }).share();
    constructor(){
      setTimeout(() => this._event$.next("hello"),1000);
    }
    (...)
  }
  

• 使用 Subject 类。这个类既是可观察的又是观察者。

  @Injectable()
  export class AppService{
    private _event:Subject<string> = new Subject();
    constructor(){
      setTimeout(() => this._event.next("hello"),1000);
    }
    (...)
  }
  

您还应该在组件中使用以下内容：

ngOnInit(){
  this._service.getEventRef()
    .subscribe(res => alert(res));
}

代替：

ngOnInit(){
  _service.getEventRef()
    .subscribe(res => alert(res));
}

查看这些插件：

• https://plnkr.co/edit/zIEKhreHcBTJzbkpjSOJ?p=preview (EventEmitter)
• https://plnkr.co/edit/KiSRB38OrDv59xjSEeS6?p=preview（主题）