Angular + Ngrx : best practice to select a value in component and in function

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>