在组件中使用 ngxs 选择器

Question

我将 ngxs 与 Angular 一起使用，现在当我尝试从商店中获取更改时，我在状态

中定义了一个选择器

@Selector()
static getData(state : DataStateModel){
    return state.data;
}

并且在组件中我使用 @Select 装饰器来获得一个 observable

@Select(DataState.getData) data$;

我遇到的麻烦是，如果我必须在组件中访问此数据，我将订阅 data$ observable 并将数据保存到组件中的新变量。

ngOnInit() {
    this.datasubscription = this.data$.subscribe( data => {this.componentVar = data});
}

这需要我手动退订。这是实现这个的正确方法吗？是否有任何内置功能或第三方插件可以帮助清理这部分？我也试过了。

store.snapshot()

Answer 1

如果您不想在组件代码中管理订阅，您可以使用 Select 装饰器中的 Observable 来组成一个新的 Observable 链，例如在这个例子中 dataChanged$。在通过 rxjs tap 运算符观察到的情况下，您可以运行进行一些验证或切换变量等，如您在评论中所述。

@Select(DataState.getData) data$;

dataChanged$: Observable<any>;

ngOnInit() { 

 this.dataChanged$ = this.data$.pipe(
    tap(result => // do something)
 );
}

然后在您的模板中，通过 async 管道订阅 $dataChanged。

另一种选择当然是在为此组件调用 ngOnDestroy 时手动取消订阅。

在组件中使用 ngxs 选择器

Using ngxs Selectors in Components

angular

ngxs