在这些情况下是否有必要订阅和删除 observables？

Question

我在这里想的是 observables ..

我想象过以下几种情况：

示例 1) 在我使用 NGRX 的情况下，我正确地创建了所有架构，并为该特定商店创建了选择器服务。

在服务中无法使用 ngOnDestroy，因为它不是组件，我有以下问题，服务中是否存在内存泄漏？还是这个服务会自动销毁 observables？

示例 2) 使用示例一中的选择器，是否需要订阅这个选择器然后销毁它？

PEOPLE-SELECTORS.SERVICE

@Injectable({ providedIn: 'root' })
export class PeopleSelectorsService {
    constructor(private readonly store: Store<StoreState>) {}

    get error(): Observable<IRequestError> {
        return this.store.pipe(select(fromPeopleSelectors.getError));
    }

    get loading(): Observable<boolean> {
        return this.store.pipe(select(fromPeopleSelectors.getLoading));
    }

    get main(): Observable<IPeople> {
        return this.store.pipe(select(fromPeopleSelectors.getMain));
    }

    get total(): Observable<number> {
        return this.store.pipe(select(fromPeopleSelectors.selectTotal));
    }

    get all(): Observable<Array<IPeople>> {
        return this.store.pipe(select(fromPeopleSelectors.selectAll));
    }

    get allIds(): Observable<Array<string | number>> {
        return this.store.pipe(select(fromPeopleSelectors.selectIds));
    }
}

APP.COMPONENT

    ngOnInit(): void {
        this.peopleDispatchService.getAll();
        this.isLoading$ = this.peopleSelectorsService.loading;
}

<main [attr.isLoading]="isLoading$ | async">
    <ng-container></ng-container>
    <app-loading-container *ngIf="isLoading$ | async; else isMainController"></app-loading-container>

    <ng-template #isMainController>
        <app-user-talk-controller-container></app-user-talk-controller-container>
        <app-user-talk-container></app-user-talk-container>
    </ng-template>
</main>

Answer 1

服务中是否存在内存泄漏？还是这个服务会自动销毁 observables？

销毁 observables 的概念并没有真正的意义。您销毁订阅（通过取消订阅），而不是可观察的。所以不，没有必要“销毁”你的服务中的 observables。

关于你的第二点，不。当组件被销毁时，异步管道会自动取消订阅。所以只要在html模板中使用async，就不用担心订阅和退订了

Answer 2

这完全正常。 在您订阅之前，您不会有任何内存泄漏。 async pipe 知道何时订阅和何时取消订阅，因此您不必担心忘记订阅，一旦不再需要订阅，async 将取消订阅。

最好的方法是编写充满管道的代码，恕我直言。

例如，在您的情况下，我将在 app.component.ts 中创建一个可观察对象，将所有数据组合在一起并具有一个可观察对象。

ngOnInit(): void {
  this.data$ = combineLatest(
    this.peopleSelectorsService.loading,
    this.peopleSelectorsService.all,    
  ).map(([isLoading, records]) => ({isLoading, records}));
}

<ng-container *ngIf="data$ | async as data">
<main [attr.isLoading]="data.isLoading">
    <ng-container></ng-container>
    <app-loading-container *ngIf="data.isLoading; else isMainController"></app-loading-container>

    <ng-template #isMainController>
        <app-user-talk-controller-container></app-user-talk-controller-container>
        <app-user-talk-container [records]="data.records"></app-user-talk-container>
    </ng-template>
</main>
</ng-container>

我看到的主要好处是我们有单一订阅并且没有订阅交叉的问题，因为有时在模板中当你有几个嵌套的async时你会发现它们也可以相互依赖并且他们赢了不能正常工作。单次订阅就没有这样的问题。

这也是我们在当前项目中所做的。时不时的data$ 很大，但感觉还是比在一个模板或一个类中订阅多个订阅要好。