停止共享数据服务 Angular 的可观察流

Question

我有这项服务可以在我的应用程序的组件之间共享数据：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataService {

    private source = new BehaviorSubject<any>('');
    data = this.source.asObservable();

    constructor() { }

    update(values: any) {
        this.source.next(values);
    }
}

从一个组件，我像这样更新数据：

this.dataSvc.update(this.data);

假设 this.data 是一个对象。

从另一个组件，我订阅服务

this.dataSvc.data.subscribe(
    data => let object = data,
    error => console.log(error),
    () => console.log('complete')
);

从不调用完整方法。 如何调用完整的方法并停止订阅？
我尝试在下一次服务之后添加this.source.complete()。它不起作用

谢谢

Answer 1

Observable 永远不会完成的原因是你永远不会取消订阅它。

您可以使用takeUntil 之类的运算符（如果您想取消订阅某个条件），但我感觉您只需要在组件被销毁时清理您的订阅即可。以下是如何做到这一点的几个选项：

当组件被销毁时，您可以使用ngOnDestroy 生命周期挂钩取消订阅此订阅。

试试这个：

subscription: Subscription;

/* using ngOnInit life cycle hook for the example, 
   but you could assign the subscription anywhere */
ngOnInit() { 
  this.subscription = this.dataSvc.data.subscribe( //.. )
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

问题是您正在设置订阅，但从未清理它，因此 Observable 永远不会“完成”。上面的代码将解决这个问题。

或者，如果您只需要模板中的数据而不需要组件类中的数据，则可以使用async 管道。

在您的component.ts 文件中：

data$: Observable<Data>;
ngOnInit() {
  this.data$ = this.dataSvc.data;
}

然后在你的模板中：

 <p> {{ data$ | async }} </p>

当你的组件被销毁时，Angular 会为你处理所有的清理工作:)

这里有一些关于life cycle hooks、unsubscribe 方法和async pipe 的链接。