angular - Angular项目源码中的文本如何使用i18t？

Question

我正在使用 Angular 4 的国际化功能，并使用目标语言中的 angular-cli 成功构建了项目。HTML 模板已正确翻译。但是我在 javascript 代码中得到了一些文本。

将 js 源代码中使用的字符串本地化的推荐方法是什么 诸如验证之类的事情？我们可以期待 i18n 带来解决方案吗？

目前我正在使用语言环境来确定要使用的翻译。Locale 从 ng serve --locale fr 或 ng build --locale fr

设置

像这样构建/服务:

ng serve --aot --locale fr  ...

并像这样在代码中使用语言环境:

import { LOCALE_ID } from '@angular/core';
// ...
constructor (@Inject(LOCALE_ID) locale: string) {
}

(我一直在关注 http://blog.danieleghidoli.it/2017/01/15/i18n-angular-cli-aot/ 上的重要提示)

Answer 1

在您的代码中使用I18nPipe:

constructor(private translator: I18nPipe) {
    let translatedText = this.translator.transform('Hello');
}

其中 transform() 是您的 I18nPipe 类中的一个方法，它给定一个 string 参数来转换它。示例:

i18n 管道:

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

    constructor(public i18nService: I18nService) {
    }

    transform(phrase: any, args?: any): any {
        return this.i18nService.getTranslation(phrase);
    }

}

国际化服务:

@Injectable()
export class I18nService {

    public state;
    public data: {};

   getTranslation(phrase: string): string {
        return this.data && this.data[phrase] ? this.data[phrase] : phrase;
    }

    private fetch(locale: any) {
        this.jsonApiService.fetch(`/langs/${locale}.json`)
            .subscribe((data: any) => {
                this.data = data;
                this.state.next(data);
                this.ref.tick();
            });
    }
}

在您的 i18nService 中，您在 fetch() 方法中获取当前语言并通过自定义 API 服务(在我的例子中是 jsonApiService) 你从 es.json、en.json、de.json 等获取数据。(取决于你的 local 参数) 和 getTranslation( ) 你实际上是在翻译一个给定的参数并返回它的翻译值。

更新 1:

有了这个，你可以得到一个类似es.json的文件:

"hello": "Hola",
"sentence1": "This is the sentence 1",
"goodbye": "Adiós"

并且这个 @Pipe 可以在代码中使用，以在你的 .component.ts 文件中应用翻译，就像我在上面显示的那样 (这很有用例如，用于使用 Ajax 呈现的数据表)。

或者可以简单地应用到你的模板中:

{{ 'hello' | i18n }}
{{ this.goodbyeStringVariable | i18n }}