如何在组件中使用@ngrx/store ?

Question

阅读文档后，我的理解是，为了从NgRx存储中获取值，我们必须使用选择器。到目前为止，我很幸运地做到了这一点，只有一个关于类型的小问题，这让我担心我的实现是否在任何方面都是不正确的。

那么，假设我想从存储中检索一个数字值，例如id。在我的componentName.component.ts中，我将像这样访问这个值:

id$ = this.store.select(selectId);

其中selectId从另一个文件定义为:

export const selectData = (state: AppState) => state.data;
export const selectId = createSelector(
selectData,
(state: DataState) => state.id,
)

我能够通过做{{id$ | async}}轻松访问我的HTML组件中的id$，但从组件类本身访问它已被证明有点困难。对于初学者来说，变量类型是Observable<number>而不仅仅是number，这使得在需要为number类型的情况下很难使用它，例如在比较它时:

ngOnInit(): void {
console.log(this.id$ === 0);
}

我从上面代码中得到的TypeScript错误是:

TS2367:此条件将始终返回'false'，因为类型'number'和'Observable '没有重叠。

控制台日志id$本身确认它确实是Observable类型，所以这让我相信我做错了什么，但我不确定到底是什么。任何帮助都是感激的!!

Answer 1

id$是一个Observable，你可以通过使用subscribe函数从组件类中订阅它，或者使用async管道从组件模板中订阅它来访问它的值。

在组件类中:

ngOnInit(): void {
this.id$.subscribe(id => console.log(id));
}

在组件模板中:

<span>{{ id$ | async }}</span>

查看Angular关于Observable(s)的官方文档:

https://angular.io/guide/observables