Question

我在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 }}

正在语言组件之前编译管道。所以＆＃39;标签的价值＆＃39;永远是默认的：＆＃39; en-us＆＃39;

翻译服务：

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中的值是什么，都将读取默认值。

有谁知道如何解决这个问题？

Answer 1

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

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

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

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

根据URL语言Angular2翻译管道

1 个答案: