RxJS:如何切换以在多个行为主题源之间切换

时间:2018-02-28 21:21:39

标签: javascript angular typescript rxjs

情境:

我有一个网格,我想在其中显示数据。我可能有两个(或更多)行为主题数据源。我还有一个toggle observable,它返回一个数字,表示我想要显示哪个数据源(即1表示源1,2表示源2等)。

问题:

如何合并n个源,但只发出来自源的记录,如toggle observable所示?我的网格将订阅生成的observable。当切换观察器发出时,我希望发出所选源的最新信息。

.box {
  width: 250px;
  height: 100px;
  background-color: red;
}

.boxWrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 250px);
  justify-content: center;
}

1 个答案:

答案 0 :(得分:4)

我认为switchMap可以在这里解决问题。根据定义,它的目的是在多个来源之间切换。

// Sources
let sources = [
  new BehaviorSubject([]),
  new BehaviorSubject([]),
];

// Toggle observable
let toggle = new BehaviorSubject(0); // default to the first source

// Selected observable
let gridDataSource = toggle.switchMap((i) => source[i]);

如果你不能,或者不想使用一组数据源,你可以回到switchMap声明中的一个简单的switch-case。

let gridDataSource = toggle.switchMap((i) => {
    switch(i) {
        case 1: return source1;
        case 2: return source2;
    }
});