时间戳

首页 > 解决方案 > Angular + Ngrx：在组件和函数中选择值的最佳实践

angular - Angular + Ngrx：在组件和函数中选择值的最佳实践

问题描述

我的问题与ngrx get value in function中的问题几乎相同，但我想知道答案（请参阅该主题中的评论）是否仍然是当今的最佳实践。

我的情况是：

  1. 我想从商店中获取 2 个值以显示在我的组件中 --> 我使用选择器和异步管道
  2. 我需要将这些相同的值传递给 Angular Material 对话框，以便在对话框组件中使用它们。

我有一个可行的解决方案：我在 ngOnInit() 中使用订阅函数，并使用来自 Observable 的值设置一个局部变量。所以我不再需要使用异步管道，我可以轻松地将值传递给某些函数......这听起来像是最好的选择，但我在任何地方寻找答案，我看到“避免使用订阅”。

所以我想知道：

我的问题是我想要一种处理 ngrx 值的一致方法，但现在看起来我需要根据场景使用 2 种方法：

（令我惊讶的是：在互联网上很难找到明确的答案......）

标签： angularreduxngrxrxjs-observablesangular-ngrx-data

解决方案

对，你需要避免订阅。将async管道与 一起使用as，理想情况下，您的代码中将有 0 个订阅。

在组件类中，我们创建一个从存储中选择数据的流

export class MyComponent implements OnDestroy {
    public readonly data$: Observable<{
        user: User,
        items: Array<Item>,
    }>;

    constructor(protected readonly store: Store<StoreState>) {
        this.data$ = combineLatest([
            this.store.select(currentUser),
            this.store.select(someItems),
        ]).pipe(
            map(([user, items]) => ({
                user,
                items,
            })),
        );
    }

    public submit(user: User, item: Item): void {
        // some logic here
    }
}

然后在它的模板中我们有一个解析它的包装器。

<ng-container *ngIf="data$ | async as data">
    <div>header</div>
    <button *ngFor="let item of data.items" (click)="submit(data.user, item)">{{data.user.name}} {{item.name}}</button>
    <div>footer</div>
</ng-container>

推荐阅读