无法创建可观察的

时间:2017-09-12 13:13:23

标签: javascript rxjs

从另一个类调用init函数,永远不会调用console.log。稍后,调用broadcast会出现以下错误:

  

未捕获(承诺)TypeError:无法读取属性' next'的   未定义

带有可观察代码的文件:

import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/share';
import 'rxjs/add/observable/of';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import Deferred from './Deferred';

import * as m from '../Models/models';

let sharedServiceInstance = null;

export default class SharedService {
    observable: Observable<any>;
    observer: Observer<any>;

    constructor() {
        if(!sharedServiceInstance){
            sharedServiceInstance = this;
        }
        return sharedServiceInstance;
    }

    init = () =>{
        var deferred = new Deferred<any>();
        if(this.observable != undefined){
            deferred.resolve();
        }
        else{
            this.observable = Observable.create((observer: Observer<any>) => {
                this.observer = observer;
                console.log("Observer: " + JSON.stringify(this.observer,null,4));
                deferred.resolve();
            }).share();
        }
        return deferred.promise;
    }

    broadcast(event: m.SharedEventModel) {
        this.observer.next(event);
    }

    on(eventName, callback) {
        return this.observable.filter((event) => {
            return event.Name === eventName;
        }).subscribe(callback);
    }
}

启动并调用observable的文件:

import { Subject } from 'rxjs/Subject';
import SharedService from '../Services/sharedService';

import * as m from '../Models/models';

let initializeServiceInstance;

export default class InitializeService {
    private sharedService = new SharedService();    

    public constructor(){
        if(!initializeServiceInstance){
            this.initialize();
            initializeServiceInstance = this;
        }
        return initializeServiceInstance;
    }

    initialize =() =>{
        var promise1 = this.sharedService.init()
        .then(()=>{
           //Debugger never reaches here
        })
        .catch((response)=>{
            //Debugger never reaches here

            var event = new m.SharedEventModel({
                Name: m.EventSubjectEnum.AfterLogout
            })
            this.sharedService.broadcast(event);
        })
    }

}

注意:使用不rxjs的{​​{1}}。

1 个答案:

答案 0 :(得分:1)

在这段代码中:

this.observable = Observable.create((observer: Observer<any>) => {
    this.observer = observer;
    console.log("Observer: " + JSON.stringify(this.observer,null,4));
}).share();

在订阅之前不会执行内部函数。订阅的唯一地点是.on.on永远不会被调用。因此,如果还没有订阅,那么this.observer将是未定义的。由于它可以是未定义的,this.observer.next(event);可能会抛出错误。

此外,如果有两个订阅,则第二个订阅将覆盖this.observer,从而使第一个订阅不会收到任何通知。

我认为,对于您尝试做的事情,您会想要使用某个主题。

import { Subject } from 'rxjs/Subject';
// and other imports

export default class SharedService {
    subject: Subject<any>

    constructor() {
        if(!sharedServiceInstance){
            sharedServiceInstance = this;
        }
        return sharedServiceInstance;
    }

    init = () => {
        this.subject = new Subject();
    }

    broadcast(event: m.SharedEventModel) {
        this.subject.next(event);
    }

    // I don't recommend mixing callbacks and observables in this way
    on(eventName, callback) {
        return this.subject.filter((event) => {
            return event.Name === eventName;
        }).subscribe(callback);
    }

    // My recomendation would be to just return the observable
    //   That way the caller can decide whether they want to subscribe
    //   Or whether they want to do additional manipulation of the stream
    //on(eventName) {
    //    return this.subject.filter((event) => {
    //        return event.Name === eventName;
    //    });
    //}
}