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

Question

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

我的情况是：

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

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

所以我想知道：

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

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

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

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

Answer 1

是的，你需要避免订阅。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>