Angular 4 i18n示例如何实现角度4中的i18n 4

Question

如何实现角度中的i18n 4.我是角度4中的新角色。我想在角度4项目中实现i18n。这个角度4项目由角CLI生成。请帮我，我该怎么做。

在此先感谢

Answer 1

这可能是你在找什么： 的国际化（i18n）库角2+ https://github.com/ngx-translate/core

Answer 2

这是如此简单。只要做到：

npm install @ngx-translate/core @ngx-translate/http-loader --save

那么你应该建立在〜/ src目录/资产的文件夹名称为i18n

，并导入app.module.ts模块

import {TranslateModule, TranslateLoader} from '@ngx-translate/core'; 
import {TranslateHttpLoader} from '@ngx-translate/http-loader'; 
import {HttpClientModule, HttpClient} from '@angular/common/http'; 

进口之前，所有模块你需要补充：

// AoT requires an exported function for factories 
export function HttpLoaderFactory(http: HttpClient) { 
    return new TranslateHttpLoader(http); 
} 

然后......在@NgModule进口

HttpClientModule, 
    TranslateModule.forRoot({ 
      loader: { 
      provide: TranslateLoader, 
      useFactory: HttpLoaderFactory, 
      deps: [HttpClient] 
      } 
    }) 

而且，完成添加translateService

// ngx-translate 
import { TranslateService } from '@ngx-translate/core';` 

声明的构造函数，然后设置默认语言

constructor(public translate: TranslateService) { 
    translate.addLangs(["en", "es"]); 
     translate.setDefaultLang('en'); 

     let browserLang = translate.getBrowserLang(); 
     translate.use(browserLang.match(/en|es/) ? browserLang : 'en'); 
    } 

上述过程完成后，您需要创建文件：

〜/ src目录/资产/ es.json和〜/ src目录/资产/ en.json我的情况与此格式：

{ 
    "CARD": { 
    "NAME": "Celiz Morante Matias Nahuel", 
    "TITLE": "Full Stack JS Developer", 
    "EMAIL": "mceliz@....it.com.ar", 
    "PHONE": "+549....", 
    "SKYPE": "enl...", 
    "ADDRESS": "Jo.. Inge... ...40", 
    "GITHUB": "https://github.com/G33N", 
    "LINKEDIN": "https://www.linkedin.com/in/matias-nahuel-celiz-morante-994719149/" 
    }, 
    "EXPERIENCE": { 
    "TITLE": "Experience" 
    }, 
    "EDUCATION": { 
    "TITLE": "Education" 
    }, 
    "PORTFOLIO": { 
    "TITLE": "Portfolio" 
    }, 
    "FOOTER": { 

    } 
} 

而且这是在模板调用方式：

<h2>{{ 'EXPERIENCE.TITLE' | translate }}</h2> 

这是的https://github.com/ngx-translate/core#installation