根据 URL 语言 Angular2 翻译管道答案

【问题标题】：translate pipe according to URL language Angular2根据 URL 语言 Angular2 翻译管道
【发布时间】：2017-06-09 14:50:35
【问题描述】：

我在 Angular2 应用程序中有一个翻译管道。我有一个名为： LanguageComponent 的组件，它是所有其他组件的父级。

{ path: ':lang', component: LanguageComponent,
    children: [
      { path: 'search', component: SearchComponent },   
    ]}

语言组件读取 URL 并将其添加到翻译服务和从该服务读取的管道：

this.route.params.subscribe(params => {
   this.translate.setCurrentLanguage(params['lang'].toLowerCase());
});

一切正常，翻译和参数中的值是正确的。但问题出在 GUI 中：

{{ 'label' | translate }}

管道在语言组件之前被编译。所以'label'的值总是默认的：'en-us'

翻译服务：

public defaultLanguage = 'en-us';
getCurrentLanguage(): any {
   if (this.locale == null) {
     this.locale = window.navigator.language == null ? this.defaultLanguage : window.navigator.language;
   }
   return this.locale;
}

路由返回正确的值。但是如果我在语言组件中设置一个调试器 onInit 并在语言服务中设置另一个。服务内的调试器将在另一个之前启动并读取默认值，无论 URL 中的值是什么。

有人知道怎么解决吗？

【问题讨论】：

标签： angular typescript pipe

【解决方案1】：

您可以构建类似于 Angular 的 async pipe 的东西。

你的管道的构造函数应该注入private _ref: ChangeDetectorRef。

transform 方法应将转换后的值存储在实例变量中，并返回引用实例变量的 WrappedValue。

它还应该从语言服务订阅当前语言。当当前语言发生变化时，它应该更新实例变量，然后它应该调用this._ref.markForCheck()，这将导致重新评估包装的值。

【讨论】：

我不太明白。我添加了 ChangeDetectorRef。但没有任何改变。 WrappedValue 是什么意思。你能给我提供代码解决方案吗？谢谢！
不，我无法提供代码解决方案。我目前没有时间。我上面链接的异步管道实现应该是一个很好的模板。
好的，没问题，谢谢你的想法。但我的管道中没有订阅。那么我应该在哪里使用 this._ref.markForCheck() ？
您应该更改您的语言服务，以便您可以订阅当前语言。
谢谢，它有效。我在调用路由后执行了 _ref.markForCheck() 并且它有效。