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（回调）。

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

由于

Answer 1

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

有关解释，请参阅the documentation。

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

Angular2动态管道

1 个答案: