1

我正在使用管道来国际化我的应用程序：

import {Pipe, PipeTransform} from '@angular/core';
import {I18nService} from './i18n.service';

@Pipe({
  name: 'i18n'
})
export class I18nPipe implements PipeTransform {

  constructor(private i18nService: I18nService) {
  }

  transform(value: any, args?: any): any {
    return this.i18nService.get(value);
  }

}

此管道调用服务：

import {Injectable} from '@angular/core';

const i18n = {
  en: {
    hello: 'Hello'
  },
  fr: {
    hello: 'Salut'
  }
};

@Injectable()
export class I18nService {

  language: string = 'en';

  constructor() {
  }

  get(key: string) {
    let languageObject = i18n[this.language];
    return languageObject[key];
  }

}

在一个组件中，我这样使用它：

<div (click)="switchLanguage()">{{'hello' | i18n}}</div>

switchLanguage() {
  this.i18nService.language = 'en' ? 'en' : 'fr';
}

但是，即使服务语言值已更改，管道结果也不会重新评估。我需要导航到任何其他路线并回来查看考虑到此更改。

我尝试了 ApplicationRef.tick() 和 NgZone.run(callback) 没有任何运气。

关于如何在不导航到另一条路线或重新加载页面的情况下重新评估应用程序的每个管道的任何想法？

谢谢

4

1 回答 1

2

您的管道应标记为非纯管道，因为即使输入未更改，它对给定输入的转换结果也会发生变化。

有关说明，请参阅文档。

@Pipe({
  name: 'i18n',
  pure: false
})
于 2016-11-12T16:53:42.310 回答