在服務中定義的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)); 
} 

看到這些plunkrs：

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