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