2017-02-01 165 views
0

我想創建一個可觀察和觀察如下利用觀察員/從rxjs

我期待這將觸發onNext的觀察者觀察到。這是我的理解。

讓我知道,如果這種理解是好的?因爲它不以這種方式工作。

的僞代碼:

@Injectable() 
export class HeroService { 

    static eventname = []; 
    static observable:Observable<string[]>; 
    constructor() { this.init(); } 

    init() { 
     subscribe(); 
     eventhandler = function (name) { 
      HeroService.eventname.push(name); 
     }; 
    } 

    subscribe(): void { 
     HeroService.observable = Observable.of (HeroService.eventname); 

     var observer = { 
      next: x => console.log('Observer got a next value: ' + x), 
      error: err => console.error('Observer got an error: ' + err), 
      complete:() => console.log('Observer got a complete notification'), 
     }; 
     HeroService.observable.subscribe (observer); 
    }  
} 

當事件處理程序被調用時,我添加了新的事件EVENTNAME。 我預計觀察員會被調用。但在檢查時,我發現沒有訂戶。 array is lenth 0

eventHandler由WebSocket/SignalR Hub從服務器調用。

回答

0

你需要訂閱你的observable。

this.observable.subscribe(observer); 

瞭解本教程更多:https://egghead.io/lessons/rxjs-creating-observable-from-scratch

+1

增加的部分。忘了把它寫入僞代碼。無論如何。所以在init中只會調用一次。然後'完成'消息自動發送。因此,當更改事件名稱觀察者未被觸發時, – Paperless

+0

現在它在初始化期間僅被觸發一次。之後,如果我檢查沒有訂戶可用的觀察員。它如何清除? – Paperless

0

它看起來像你期待HeroService.observable = Observable.of (HeroService.eventname);「監視」事件名稱數組。這並不是真的如此。一些東西必須發出(或下一個)值。

而不是嘗試使用觀察者和觀察,也許嘗試使用主題。確保只暴露主體的可觀察部分。

事情是這樣的:

import { Component, OnInit } from '@angular/core'; 
import { Subject, Observable } from 'rxjs'; 

@Component({ 
    selector: 'home', 
    template: require('./home.component.html') 
}) 
export class HomeComponent { 
    private eventNames = []; 
    private eventListSubject: Subject<string[]> = new Subject<string[]>(); 

    constructor() { 
    } 

    get eventList(): Observable<string[]> { 
     return this.eventListSubject; 
    } 

    ngOnInit() { 
     this.eventList.subscribe(
      (x) => console.log('Observer got a next value: ' + x), 
      (err) => console.error('Observer got an error: ' + err), 
      ()=> console.log('Observer got a complete notification') 
     ); 
    } 

    eventHandler(name: string): Function { 
     return (name) => { 
      this.eventNames.push(name); 
      this.eventListSubject.next(this.eventNames); 
     } 
    } 
}