Angular 5 中使用 rxjs 进行持久订阅

我对 Angular 5 中的 rxjs 仍然有点陌生，并且很难表达我的问题。我仍然希望得到一些提示。

我经常会得到相同的设置：

• 多个组件显示相同的数据
• 访问数据的单个服务

现在通过 Observables 接收数据时我有 2 个选择：

a) 订阅一个 observable 来获取数据一次，然后再次订阅来获取更新

b) 订阅可观察对象并在数据更改时始终获取更新

a) 很简单，但是 b) 我经常遇到麻烦，想知道这是否是使用 Observables 的正确方法。

一个问题是，取消订阅在某些情况下变得很重要，并且错过取消订阅会导致每次更新可观察值时执行严重的垃圾。

另一方面，使用选项 a)，当另一个组件正在更新底层数据时，我可能会错过一个组件中的一些更新。

是否有任何最佳实践可以避免所有这些陷阱？

听起来您想要弄清楚的概念是如何在使用 Angular 时规范 RxJS 的订阅管理。为此，我想到了三个主要选项：

1. 使用以下命令自动创建和删除订阅async管道。如果您想严格根据可观察对象发出的数据进行 UI 更改，那么async在创建组件时，管道可以轻松地创建对给定可观察量的订阅，并在组件被销毁时删除这些订阅。这可以说是使用订阅的最简洁的方式。

举个例子：

@Component({
    selector: 'my-component',
    template: `
        <div *ngFor="let value of value$ | async">
            {{value}}
        </div>
    `
})
export class MyComponent {
    public value$: Observable<String> = this.myValueService
        .getValues()
        .map(value => `Value: $value`);
    constructor(myValueService: MyValueService) {}
}

2. 通过创建类级别来管理组件中的订阅Subscription中的物体ngOnInit方法，然后在中取消订阅ngOnDestroy方法。当我需要访问组件代码中的订阅时，我倾向于采用这种约定。拥有ngOnInit and ngOnDestroy每个使用订阅的组件中的方法都会添加样板文件，但如果您需要在组件代码中进行订阅，则通常是必需的。

例如：

@Component({
    selector: 'my-component',
    template: `
        <div #myDiv></div>
    `
})
export class MyComponent implements OnInit, OnDestroy {
    private mySub: Subscription;
    constructor(myValueService: MyValueService) {}

    public ngOnInit() {
        this.mySub = this.myValueService.getValue().subscribe((value) => {
            console.log(value);
            // Do something with value
        });
    }
    public ngOnDestroy() {
        this.mySub.unsubscribe();
    }
}

3. 通过使用限制操作来限制订阅寿命，例如first()。这是当您发起订阅时默认执行的操作HttpClient可观察到的。这样做的好处是需要很少的代码，但它也可能导致订阅未清理的情况（例如，如果可观察对象从不发出）。

如果我想要对可观察对象执行的所有操作都可以在视图中完成，那么我几乎总是使用option 1。这涵盖了我经验中的大多数情况。您始终可以使用中间可观察量来生成可观察量，如果需要，您可以在视图中订阅该可观察量。中间可观察量不会引入内存泄漏问题。