Angular, NGRX 如何在 ngOnInit 中使用 rxjs 操作符

Question

Angular, NGRX 如何在 ngOnInit 中使用 rxjs 操作符

嘿，

我有一个小问题来理解将 rxjs 运算符与 ngrx 结合使用。下面我有一个带有 ngrx 存储的简单组件 - 我有所有必要的数据并且选择器工作正常:

export class TestComponent implements OnInit {

    selector1$: Observable<any>;
    selector2$: Observable<any>;



    constructor(private store$: Store<StoreModel>) {
    }

    ngOnInit() {

    selector1$ = this.store$.pipe(select(selectValue1));
    selector2$ = this.store$.pipe(select(selectValue1));
    }

}

但是 - 我想使用 rxjs 运算符 - 例如使用 withLatestFrom 并调用那里 2 个选择器 - 我应该从哪里开始 .pipe？

一世。

ngOnInit() {

    pipe(
            withLatestFrom(
                this.store$.pipe(select(selectValue1));
                this.store$.pipe(select(selectValue2));
            ),
            map(([respValue1, respValue2]) => {
               }
    }

二、或者通过 this.store$。

this.store$.pipe(
            withLatestFrom(
                this.store$.pipe(select(selectValue1));
                this.store$.pipe(select(selectValue2));
            ),
            map(([respValue1, respValue2]) => {
           }
        }

三、或像 I./II.但是通过箭头？

this.store$.pipe(combineLatest(
                this.store$.pipe(select(selectValue1)),
                this.store$.pipe(select(selectValue2)),
            (respValue1, respValue2) => {
                return `${respValue1} + ${respValue2}`

            })).subscribe(console.log);

所有的解决方案都不起作用。我应该为调用 rxjs 运算符创建新的可观察值吗？或者这种情况的最佳解决方案是什么。

先感谢您。

Answer 1

withLatestFrom()不是“可观察的创建方法”，所以你可能想要使用 combineLatest()相反(另外， withLatestFrom() 的工作方式与 combineLatest() 不同)。

combineLatest([
  this.store$.pipe(select(selectValue1)),
  this.store$.pipe(select(selectValue1)),
]).subscribe(([result1, result2]) => {
  // do whatever you want here
})