在模板中使用 ngxs observable select 属性
Using ngxs observable select property in template
我刚刚开始使用 Angular 6,所以对于这个可能非常简单的问题,我提前表示歉意。我也刚刚开始研究使用 ngxs
进行状态管理。
我的组件上有一个 @Select
Observable 属性。
@Select(HomeState.isLoading) isLoading$: Observable<boolean>;
我的问题是,如何在组件模板中实际使用 isLoading
?在模板中使用可观察状态属性的一般模式是什么?我应该订阅 Observable 并将值映射到组件上的另一个 属性,还是有办法在模板中使用 Observable?
当然,如果只是直线上升boolean
,我可以在模板中像*ngIf="isLoading"
那样使用它。
使用 observables 的想法是允许 angular 通过使用模板中的 'async' 管道来管理订阅,否则如果您在某些时候自己做,您将需要管理所有通过在组件被销毁时取消订阅可观察对象来进行订阅。在您提供的示例中 isLoading
变量可用于模板以显示或隐藏组件的一部分,例如:
<div *ngIf="isLoading$ | async">show loader</div>
在我看来,一个好的模式总是让视图处理订阅!。如果您需要转换可观察对象中的变量,您始终可以通过管道传输和转换变量。
我刚刚开始使用 Angular 6,所以对于这个可能非常简单的问题,我提前表示歉意。我也刚刚开始研究使用 ngxs
进行状态管理。
我的组件上有一个 @Select
Observable 属性。
@Select(HomeState.isLoading) isLoading$: Observable<boolean>;
我的问题是,如何在组件模板中实际使用 isLoading
?在模板中使用可观察状态属性的一般模式是什么?我应该订阅 Observable 并将值映射到组件上的另一个 属性,还是有办法在模板中使用 Observable?
当然,如果只是直线上升boolean
,我可以在模板中像*ngIf="isLoading"
那样使用它。
使用 observables 的想法是允许 angular 通过使用模板中的 'async' 管道来管理订阅,否则如果您在某些时候自己做,您将需要管理所有通过在组件被销毁时取消订阅可观察对象来进行订阅。在您提供的示例中 isLoading
变量可用于模板以显示或隐藏组件的一部分,例如:
<div *ngIf="isLoading$ | async">show loader</div>
在我看来,一个好的模式总是让视图处理订阅!。如果您需要转换可观察对象中的变量,您始终可以通过管道传输和转换变量。