Angular 4 的国际化

Question

我需要为我的 Angular 4 添加多语言支持 Application.I 需要知道实现此目的的最佳方法。

Answer 1

你可以使用ngx-translate，它是Angular 2+

中国际化的标准库

您可以导入库并创建一组包含翻译的 json 文件并将其放入资产文件夹中。

那你就可以在HTML里引用了。举个例子。

en.json有,

"guest.first-name": "first Name",

其中第一个是键，第二个是要显示的值。你可以在 html 中引用

  <input  [label]="'guest.first-name' | translate" type="text" name="form_name" [(ngModel)]="firstName" required="required" ></input>

Answer 2

你可以使用我用过的 ngx-translate 库，它对 Angular.Also 的国际化非常有用我建议你 Angular，你应该检查 jhipster 项目，然后你可以了解更多关于 Angular 4 和 Spring Boot.It 的高级和详细主题是非常有用的项目，你也可以快速创建 Angular 和 Spring 引导项目...

Answer 3

如果您使用 angular-cli 创建新应用程序，它有一个很好的翻译基础设施，使用 ngx-translate。并使用管道翻译您的文本：翻译如下：

<span>{{ text | translate }}</span>

翻译文件存在于 /src/assets/i18n/langCode.json（例如：en.json）。和主布局构造函数中的初始化要求

constructor(public translate: TranslateService, zone: NgZone) {
  translate.use('en');
}

Answer 4

你也可以做一件简单的事情，制作各种文件，如en.json等，由各种标签组成，如

en.json

{

 lbl_name1: "Lable Name 1",
 lbl_name2: "Lable Name 2"

}

现在写一个读取文件的机制，对于 Angular 6 我们可以在您的 abc.ts 文件中使用 http 客户端 &将数据放入会话存储

    public languageVar: any = [];
    //Http Client can be used and you can pass the file name at runtime also, I have 
    passed it statically

    this.httpClientObj.get(en.json).suscribe({
    data=> {
           //setting into session for further use into app
           window.localstorage.setItem('langLables',JSON.stringify(data));

           //setting into the variable declared above
           this.languageVar = JSON.parse(window.getItem('langLables'));
       },
    error=>{
           alert("File not found"); 
      }
    }
);

现在假设您有一个 html 文件，abc.html，使用单向绑定

<h1>{{languageVar.lbl_name1}}</h1>
<p>{{languageVar.lbl_name2}}</p>

Angular 4 的国际化

Internationalization with Angular 4

multilingual

internationalization

angular