重写代码以使BehaviorSubject订阅Observable

时间:2016-10-31 02:33:48

标签: angular typescript rxjs observable rxjs5

我正在学习Angular2和RxJS,而且我正在关注别人的申请。在他的申请中,他有两个模块。第一个是asObservable.ts文件:

asObservable.ts

export function asObservable(subject: Subject) {
    return new Observable(fn => subject.subscribe(fn));
}

第二个是创建新BehaviorSubject RxJS对象并将其发送到asObservable.ts模块的文件

待办事项-store.service.ts

import {asObservable} from "./asObservable";
import {List} from "immutable";
import {Todo} from "./todo";
// Todo is a customized class

@Injectable()
export class TodoStore {

    private _todos: BehaviorSubject<List<Todo>> = new BehaviorSubject(List([]));

    get todos() {
        return asObservable(this._todos);
    }

    loadInitialData() {
        this.todoBackendService.getAllTodos()
            .subscribe(
                res => {
                    let todos = (<Object[]>res.json()).map((todo: any) =>
                        new Todo({id:todo.id, description:todo.description, completed: todo.completed}));
                    this._todos.next(List(todos));
                },
                err => console.log("Error retrieving Todos")
            )
    }
    //unnecessary code omitted
 }

我想删除asObservable.ts文件并在单个函数中执行subscribe函数,但我无法弄清楚它是如何完成的,例如:

get todos() {
    return new Observable(Subject.subscribe(this._todos));
}

这显然不起作用。有人可以给我一些关于正确方法的指示,并简要说明我做错了吗?

1 个答案:

答案 0 :(得分:3)

在我看来,原作者并不知道那里已有asObservable()方法。但是,他的版本要求Subject对我来说没有意义,这只是一个非常简单的复杂方法。此外,这种方式您无法取消订阅。

我反而坚持原来的asObservable()。其目的是隐藏您在内部使用Subject的事实,并且您只能暴露一个Observable:

export class TodoStore {
    // ...
    observable: Observable;

    constructor() {
        this.observable = this._todos.asObservable();
    }
}

然后订阅就像其他地方一样:

let store = // ... TodoStore from DI or whatever
store.observable.subscribe(val => console.log(val));