Question

我是Angular 2的初学者并且有一些问题：

问题＃1我有一个方法（放在组件中），例如“Get”。它返回带有字符串数组的Observable。在这个方法中，我使用angular的HTTP模块，它将get请求发送到后端：

this.http.get("some_URL").map(resp =><Array<string>>resp.json()).subscribe(items =>{
    this.items = items; //private component's variable
    this.subject.next(this.items); //private component's subject
});
return this.subject.asObservable(); //returns subject as observable

所以，我在这里做的只是发送GET请求，在获得结果之前，我将Subject作为Observable返回。一些调用Get方法的代码在我的“subject as observable”上订阅，当Get方法从后端获得结果时，它调用next并传递它获得的数据。如果我错了，请纠正我，但我希望我能清楚地了解如何使用Observables。

Q＃2假设我有另一个方法GetById接受id：number并返回字符串。如果我在此方法中创建了一个局部BehaviorSubject变量，那会是正确的吗？因此，每当有人调用此方法时，将创建并返回新的BehaviorSubject以进行订阅。它能以某种方式对内存或性能产生不良影响吗？

var tmpSubject: BehaviorSubject<string>;

    this.http.get("some_URL").map(resp => resp.json()).subscribe(item =>{
        tmpSubject.next(item);
    });

return tmpSubject.asObservable();

我将不胜感激任何帮助。谢谢！

Answer 1

Q1：

有一种更好的方法可以做到这一点。做这样的事情：

let observable = this.http.get("some_URL").map(resp =><Array<string>>resp.json()).cache();

let subscription = observable.subscribe(items =>{
    this.items = items; //private component's variable
    this.subject.next(this.items); //private component's subject
});

return observable; //returns subject as observable

在Q2中，您也无需创建BehaviouralSubject。您很少自己创建可观察对象。 http.get返回一个可观察的。所以只需使用它！如果你想调用get一次但是在多个地方订阅它，那就使用像cache这样的东西（我想它可能已经在rxjs的新版本中出现了问题，但还有另一种选择）。 / p>

另外，一个好的模式是取消订阅您的订阅。因此，订阅只应在Angular @Component中完成，您应该将.unsubscribe添加到OnDestroy挂钩。这详细解释了该问题：http://brianflove.com/2016/12/11/anguar-2-unsubscribe-observables/

一般来说，我发现最好的模式是你创建一个服务类，它暴露get / post /的任何方法，它们都返回任何类型的Observable。然后，您只在组件（或指令）中订阅它们。他们有OnDestroy个钩子，可以让你取消订阅而不会泄漏记忆。

看起来像是：

export class SomeService {

    function getSomething(param: any): Observable<SomeType> { ... }

}

...

@Component
export class SomeComponent extends OnDestroy {

    subscription: Subscription;

    constructor(private service: SomeService) {
        this.subscription = service.getSomething(123).subscribe(...);
    }


    function ngOnDestroy(){
        if(this.subscription) {
            this.subscription.unsubcribe();
        }
    }

Angular 2/4 Observables

1 个答案: