typescript Angular RxJS:条件运算符(if else)

s3fp2yjn  于 2023-05-19  发布在  TypeScript
关注(0)|答案(4)|浏览(196)

我想弄明白如何将一个简单的条件运算实现到一个可观察对象中。

this.deactivate$
    .pipe(
        filter((canDeactivate) => !canDeactivate),
        switchMap(() => Observable.of(window.confirm("message")))
    );

我想得到的是:

if (canDeactivate) {
    return canDeactivate;
}
else {
    return window.confirm("message");
}

上面第一个代码的问题是,当我过滤发射值时,其余的操作符没有执行,流停止填充发射值。
有什么想法吗

qybjjes1

qybjjes11#

你可以在switchMap操作符中决定哪个observable返回,如下所示:

this.deactivate$
        .pipe(
            switchMap((canDeactivate) => {
               if (canDeactivate) {
                   return Observable.of(canDeactivate);
               }
               else {
                   return Observable.of(window.confirm("message"));
               }
            })
        );

奖励(超短版):

this.deactivate$.pipe(
        switchMap((canDeactivate) => Observable.of(canDeactivate || window.confirm("message"))
    );
z5btuh9x

z5btuh9x2#

来自rxjs的文档
iif在订阅时决定实际订阅哪个Observable。
iif接受一个条件函数和两个Observable。当操作符返回的Observable被订阅时,条件函数将被调用。根据它在那一刻返回的布尔值,消费者将订阅第一个Observable(如果条件为真)或第二个Observable(如果条件为假)。条件函数也可能不返回任何内容-在这种情况下,条件将被评估为false,第二个Observable将被订阅。
范例

let accessGranted;
const observableIfYouHaveAccess = iif(
  () => accessGranted,
  of('It seems you have an access...'),
  of('Opps')
);

所以如果accessGranted为true,它将执行

bybem2ql

bybem2ql3#

window.confirm阻塞的,所以你可以使用map()操作符。对of(window.confirm(..))调用switchMap将停止JavaScript的执行。

this.deactivate$
    .pipe(
        map(canDeactivate => canDeactivate ? canDeactivate : window.confirm("message"))
    );
raogr8fs

raogr8fs4#

partition操作符呢?

我发现当你必须处理简单的条件和 predicate 时,它会更优雅:https://www.learnrxjs.io/learn-rxjs/operators/transformation/partition
它允许将一个Observable的结果分成2个Observable,如果给定的条件有效,则执行第一个Observable,如果条件无效,则执行另一个Observable。
例如:

const [canDeactivate$, cannotDeactivate$] = partition(this.deactivate$, (canDeactivate) => !canDeactivate);
// in case the condition !canDeactivate is true
canDeactivate$.pipe(switchMap(canDeactivate => of(...)).subscribe(...);
// in case the condition !canDeactivate is false
cannotDeactivate$.pipe(switchMap(() => of(window.confirm("message")))).subscribe(...);

相关问题