如何在Angular项目的源代码中将i18t用于文本? [英] How to use i18t for texts in the source code of Angular project?

问题描述

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

I am using the i18n features of Angular 4 and building the project successfully with angular-cli in the target language. HTML templates are properly translated. However I got some texts in the javascript code.

为js源中的字符串进行本地化的推荐方法是什么 诸如验证之类的东西? 我们可以期望i18n会提供解决方案吗?

What's the recommended way of localizing strings used in js source for things like validations? Can we expect i18n to come with a solution?

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

Currently I am using the locale to determine which translation to use. The Locale gets set from the ng serve --locale fr or ng build --locale fr

像这样建造/服务:

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

，并在代码中使用语言环境，如下所示:

and using the locale in the code like this:

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

((我一直关注 http://blog.danieleghidoli.it/2017/01/15/i18n-angular-cli-aot/)

推荐答案

在代码内使用I18nPipe:

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

transform()是I18nPipe类中的一种方法，给定string参数即可对其进行转换.示例:

Where transform() is a method within your I18nPipe class that given a string parameter translates it. Example:

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);
    }

}

i18nService:

@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()中，您实际上是在翻译给定参数并返回其转换后的值.

In your i18nService you are getting the current language in the fetch() method and through a custom API service (in my case is jsonApiService) you get the data from a es.json, en.json, de.json, etc. (depending on your local parameter) and in getTranslation() you are actually translating a given parameter and returning it's translated value.

更新1:

有了这个，您可以拥有一个像es.json这样的文件:

With this, you can have a file like es.json:

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

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

And this @Pipe can be used in the code to apply a translation in your .component.ts file like I have shown above (this is useful for DataTables rendered with Ajax, for example).

或者可以简单地应用于模板中

Or can be applied in your template, simply:

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

这篇关于如何在Angular项目的源代码中将i18t用于文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！