Angular2动态管道

Question

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

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) 没有任何运气。

知道如何重新评估应用程序的每个管道，而无需导航到另一条路线或重新加载页面？

谢谢

Answer 1

你的管道应该被标记为不纯的，因为它对给定输入的转换结果可能会改变，即使输入没有改变。

请参阅the documentation 了解详情。

@Pipe({
  name: 'i18n',
  pure: false
})