如何将调用链接到ng2-Translate和一般的rxjs observable



我刚刚开始在我的Ionic 2(Angular 2)项目中使用ng2翻译。我发现,当我需要同时获得几个字符串时,代码会变得嵌套,更难阅读。我有点想知道为什么像这样的东西(只发出一个值)需要使用可观察的,但也许有充分的理由。无论如何

例如,假设我在方法的不同点上有4个字符串要读取

let result1: string;
let result2: string;
let result3: string;
let result4: string;
this.translate.get("key1").subscribe(value1 => {
result1 = value1;
this.translate.get("key2").subscribe(value2 => {
result2 = value2;
// do some other stuff, which may have another observable returned so yet another level of nesting)
this.translate.get("key3").subscribe(value3 => {
result3 = value3;
// do some other stuff
this.translate.get("key4").subscribe(value4 => {
result4 = value4;
}
}
...

现在想象有超过4个字符串。此外,当这中间有其他代码时(例如,我也可以调用Ionic存储,它也返回一个Observable),代码会变得非常嵌套-这是没有错误处理的。

所以,问题是:有没有一种"更平坦"的方法可以做到这一点?是否有任何链接(即使类似于Promise"链接"),可能包括错误处理(即使有某种顶级捕获块)

我看到了其他链接的例子,但它们似乎更多地使用运算符,而不是像上面这样的大量可观测性。

您不必将它们链接起来;您可以使用combineLatest来组合可观察性:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/combineLatest';
Observable.combineLatest(
this.translate.get("key1"),
this.translate.get("key2"),
this.translate.get("key3"),
this.translate.get("key4")
)
.subscribe(([result1, result2, result3, result4]) => {
console.log(result1);
console.log(result2);
console.log(result3);
console.log(result4);
});

如果您预先知道所有键值,则可以使用translate.get()重载,该重载采用字符串数组。。。

因此:

this.translate.get(['key1','key2','key3','key4'])
.subscribe(keys => {
console.log(keys.key1);
console.log(keys.key2);
console.log(keys.key3);
console.log(keys.key4);
});

相关内容

  • 没有找到相关文章

最新更新