一般如何链接对 ng2-Translate 和 rxjs 可观察量的调用?

2024-01-10

我刚刚开始在我的 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“链接”),也许包括错误处理(即使有某种顶级 catch 块)

我见过其他链接的例子,但它们似乎更多地使用运算符而不是像上面那样的大量可观察量。


你不必把它们拴起来;您可以使用combineLatest http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-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);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

一般如何链接对 ng2-Translate 和 rxjs 可观察量的调用? 的相关文章

  • 避免在 Angular 2+ 中嵌套订阅?

    我有2个端点 1 个端点来获取当前用户的日志 1 个端点来获取该用户的授权 实际上我使用 this user subscribe e gt this grants get e subscribe x gt console log x 但这是
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • 415 不支持的媒体类型; Angular2 到 API

    我是 Angular 2 的新手 我面临着一个无法找到解决方案的问题 当我尝试从 Angular 2 发布到 API 时 我得到 415 不支持的媒体类型 角度2代码 onSubmit value any console log value
  • Angular 5 - 在加载数据之前停止未定义对象的错误

    防止控制台中因仍未定义的对象而出现错误的最佳方法是什么 假设我有这个 name string constructor private data DataService this data name subscribe res gt this
  • 编辑角度材质的表格单元格填充

    当我使用开发人员工具检查该元素时 它显示零填充 但是当我查看它并将鼠标悬停在它上面时 它非常清楚地在单元格内具有填充 我不知道这是从哪里来的 并且设置td padding 0 important 什么也没做 感知到的填充是由以下原因引起的d
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将
  • Angular 以什么方式解决重复的指令/组件选择器?

    如果我包含两个模块 它们都使用相同的选择器定义组件或指令 可以说a routerLink ModuleA 使用选择器定义指令a routerLink ModuleB 使用选择器定义指令a routerLink AppModule 包括模块和
  • StaticInjectorError[e -> e]: NullInjectorError: 没有 e 的提供程序

    在我的 app module ts 中 NgModule declarations AppComponent imports BrowserModule MaterialModule FlexLayoutModule BrowserAnim
  • Angular 6 - 找不到模块“@angular-devkit/build-angular”

    更新到 Angular 6 0 1 后 出现以下错误ng serve Could not find module angular devkit build angular from home Projects myProjectName E
  • 使用 facebook 共享动态更新元标签 - Angular 6

    我需要动态更新元标记 如 og title og description 和 og image 并在 facebook 上共享相同的内容 我已经尝试了所有方法 但没有任何效果 首先 我尝试使用 javascript 设置元标记 如下所示 v
  • Angular 2将数组传递给路由器queryString

    我想传递一个数组ids 1 2 3 像这样的路由器查询字符串 http some url ids 1 ids 2 ids 3 但是当我尝试使用 const queryParams ids 1 2 3 this router navigate
  • Angular with/Angular Material - 对话框主题损坏

    您好 我遇到了 Angular Material 主题在对话框组件中中断的问题 其中文本和其他组件的颜色未按应有的方式工作 在 app component 中 我有一个设置图标按钮来打开对话框 main settings dialog 但当
  • Angular 5 Http拦截器刷新JWT令牌

    我已经实现了令牌保存 检索的逻辑 并且我也有刷新调用 问题是 当我在 HttpInterceptor 中拦截 403 时 同时进行的其他调用也会刷新令牌 我很乐意保留这些调用 直到我的令牌刷新为止 创建我所说的请求 信号量 Injectab
  • 在 Fabric.js 中按宽度/高度在另一个画布对象内居中和缩放画布对象

    Goal 将一个对象 水平和垂直 置于另一个对象 矩形或组 的中心canvas via Fabric js或者通过Javascript保持原始对象的长宽比相同 但也不超过父对象的宽度 高度比例 父对象 矩形或组 不会居中于canvas元素
  • 如何将窗口注入到服务中?

    我正在用 TypeScript 编写一个 Angular 2 服务 它将利用localstorage 我想注入对浏览器的引用window对象到我的服务中 因为我不想引用任何全局变量 例如 Angular 1 x window 我怎么做 这目
  • Angular2 - 在反应表单上设置日期字段

    我有一个使用两个日期字段的组件 开始日期和结束日期 默认情况下 我禁用了结束日期字段 当他们选择开始日期时我会切换它 this transitionForm this fb group effectiveEndDate value disa
  • Angular - 如何解析 event.path 内的对象

    现在这是一个很难解释的复杂问题 我会尽力解释 我有一个弹出窗口 我想从中唯一地标识单击事件是来自弹出窗口内部还是外部 我的第一个方法 我用一个包住了整个弹出框div与id 说 独特 因此 我将单击事件与主机侦听器绑定 我将为其获取事件对象
  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我
  • 模块“””在 ionic 3 Geolocation 中没有导出成员“NativeGeocoderReverseResult”

    模块 没有导出成员 NativeGeocoderReverseResult L13 从 ionic native geolocation ngx 导入 Geolocation L14 导入 NativeGeocoder NativeGeoc

随机推荐