首页 › Angular论坛 › Angular i18n（国际化方案）

五月十四 發表於 2019-6-18 16:16:00

Angular i18n（国际化方案）

<h2 id="articleHeader0">一、引言</h2>
<p>i18n（其来源是英文单词 internationalization的首末字符i和n，18为中间的字符数）是“国际化”的简称。在资讯领域，国际化(i18n)指让产品（出版物，软件，硬件等）无需做大的改变就能够适应不同的语言和地区的需要。对程序来说，在不修改内部代码的情况下，能根据不同语言及地区显示相应的界面。 在全球化的时代，国际化尤为重要，因为产品的潜在用户可能来自世界的各个角落。通常与i18n相关的还有L10n（“本地化”的简称）。<br>Angular 将使用 @ngx-translate/core 和 @ngx-translate/http-loader实现国际化方案。</p>
<h2 id="articleHeader1">二、实现</h2>
<h3 id="articleHeader2">1.安装</h3>
<p>根据Angular 版本选择好对应的版本号</p>
<p><img src="https://img2018.cnblogs.com/blog/1430620/201906/1430620-20190618160245594-1784184049.png"></p>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">npm install @ngx-translate/core@9.1.1 --save
npm install @ngx-translate/http-loader@2.0.1 --save　</pre>
</div>
<h3>&nbsp;2.在app.module.ts配置</h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> app.module.ts</span>
<span style="color: rgba(0, 0, 0, 1)">
import {BrowserModule} from </span>'@angular/platform-browser'<span style="color: rgba(0, 0, 0, 1)">;
import {BrowserAnimationsModule} from </span>'@angular/platform-browser/animations'<span style="color: rgba(0, 0, 0, 1)">;
import {NgModule} from </span>'@angular/core'<span style="color: rgba(0, 0, 0, 1)">;
import {AppRoutingModule} from </span>'./app-routing.module'<span style="color: rgba(0, 0, 0, 1)">;
import {FormsModule} from </span>'@angular/forms'<span style="color: rgba(0, 0, 0, 1)">;
import {HttpClient, HttpClientModule} from </span>'@angular/common/http'<span style="color: rgba(0, 0, 0, 1)">;
import {TranslateHttpLoader} from </span>'@ngx-translate/http-loader'<span style="color: rgba(0, 0, 0, 1)">;
import {TranslateLoader, TranslateModule} from </span>'@ngx-translate/core'<span style="color: rgba(0, 0, 0, 1)">;

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 这里配置</span>
export <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> createTranslateHttpLoader(http: HttpClient) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">new</span> TranslateHttpLoader(http, './assets/i18n/', '.json'<span style="color: rgba(0, 0, 0, 1)">);
}

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 在这里配置</span>
<span style="color: rgba(0, 0, 0, 1)">    TranslateModule.forRoot({
      loader: {
      provide: TranslateLoader,
      useFactory: (createTranslateHttpLoader),
      deps:
      }
    })
],
providers: [],
bootstrap:
})
export class AppModule {
}</span></pre>
</div>
<h3 id="articleHeader4">3.新建json文件</h3>
<p>在assets 新建文件夹 i18n,在i18n文件下下新建zh.json 和 en.json 文件，分别表示中文和英文。</p>
<div class="cnblogs_code">
<pre></pre>
<p>// zh.json 不要在json文件写注释，会报错<br>{<br>&nbsp; "hello": "你好",<br>&nbsp; "header": {<br>&nbsp; &nbsp;"author": "早上好"<br>&nbsp; }<br>}</p>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">en.json不要在json文件写注释，会报错</span>
{<br>&nbsp; "hello": "Hello",<br>&nbsp; "header": {<br>&nbsp; &nbsp;"author": "Good morning"<br>&nbsp; }<br>}</pre>
</div>
<h3 id="articleHeader5">4.获取浏览器默认语言</h3>
<p>app.component.ts 文件获取浏览器默认语言，如果不是英语和中文，就默认设置为中文。</p>
<div class="cnblogs_code">
<pre>import {Component, OnInit} from '@angular/core'<span style="color: rgba(0, 0, 0, 1)">;
import {TranslateService} from </span>'@ngx-translate/core'<span style="color: rgba(0, 0, 0, 1)">;

@Component({
selector: </span>'app-root'<span style="color: rgba(0, 0, 0, 1)">,
templateUrl: </span>'./app.component.html'<span style="color: rgba(0, 0, 0, 1)">,
styleUrls: [</span>'./app.component.css'<span style="color: rgba(0, 0, 0, 1)">]
})
export class AppComponent implements OnInit {
title </span>= 'app'<span style="color: rgba(0, 0, 0, 1)">;

constructor(public translateService: TranslateService) {
}

ngOnInit() {
    </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> --- set i18n begin ---</span><span style="color: rgba(0, 128, 0, 1)">*/</span>
    <span style="color: rgba(0, 0, 255, 1)">this</span>.translateService.addLangs(['zh', 'en'<span style="color: rgba(0, 0, 0, 1)">]);
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.translateService.setDefaultLang('zh'<span style="color: rgba(0, 0, 0, 1)">);
    const browserLang </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.translateService.getBrowserLang();
    </span><span style="color: rgba(0, 0, 255, 1)">this</span>.translateService.use(browserLang.match(/zh|en/) ? browserLang : 'zh'<span style="color: rgba(0, 0, 0, 1)">);
    </span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)"> --- set i18n end ---</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
}
}</span></pre>
</div>
<h3>5.通过以上配置，即可根据浏览器语言设置来加载国际化语言</h3>
<div class="cnblogs_code">
<pre>&lt;h1&gt;{{'hello' | translate}}&lt;/h1&gt;
&lt;h1&gt;{{'header.author' | translate}}&lt;/h1&gt;// 嵌套的这样书写</pre>
</div>
<h3 id="articleHeader7">6.手动选择语言</h3>
<div class="cnblogs_code">
<pre>&lt;button (click)="changeLanguage(language)"&gt;{{ languageBtn}}&lt;/button&gt;</pre>
</div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">languageBtn;
language;

constructor(public translateService: TranslateService) {
}

ngOnInit() {
    const browserLang </span>= <span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.translateService.getBrowserLang();
    </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.settingBtn(browserLang);
}

</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">设置btn的文字和需要传递的参数</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
settingBtn(language: string) {
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (language === 'zh'<span style="color: rgba(0, 0, 0, 1)">) {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.languageBtn = 'English'<span style="color: rgba(0, 0, 0, 1)">;
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.language = 'en'<span style="color: rgba(0, 0, 0, 1)">;
    } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.languageBtn = '中文'<span style="color: rgba(0, 0, 0, 1)">;
      </span><span style="color: rgba(0, 0, 255, 1)">this</span>.language = 'zh'<span style="color: rgba(0, 0, 0, 1)">;
    }
}

</span><span style="color: rgba(0, 128, 0, 1)">/*</span><span style="color: rgba(0, 128, 0, 1)">切换语言</span><span style="color: rgba(0, 128, 0, 1)">*/</span><span style="color: rgba(0, 0, 0, 1)">
changeLanguage(lang: string) {
    console.log(lang);
    </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.translateService.use(lang);
    </span><span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">.settingBtn(lang);
}</span></pre>
</div>
<p>&nbsp;</p><br><br>
来源：https://www.cnblogs.com/dawnwill/p/11045801.html

查看完整版本: Angular i18n（国际化方案）