2

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

我的情况是：

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

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

所以我想知道：

  • 有没有更好的方法来处理这种情况？
  • 或者这是“处理这种情况的ngrx/rxjs方式”？
  • 或者我是否使用选择器 Observable 和异步管道来显示组件中的值并订阅 Observable 以创建一个局部变量以传递给我的函数（这似乎有点多余......）
  • 或者 ...？

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

  • 用于在组件中显示值的异步管道（根据社区的首选方法）
  • 在本地函数中使用值时订阅（社区建议“除非必要”不要使用订阅）

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

4

1 回答 1

4

对，你需要避免订阅。将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>
于 2020-05-16T17:07:14.130 回答