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（主题）

在服务中定义的angular2事件不会被组件捕获

1 个答案: