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的一些链接。

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

1 个答案: