i18n
应用程序的国际化涉及到开发的很多方面,主要是如何让应用可以被全世界的用户使用而且用起来比较友好。本章内容主要讲的下面几个方面:
Angular
内置国际化ngx-translate
: 用来给我们自己的组件添加国际化支持,主要模块是@ngx-translate/core,@ngx-translate/http-loader
ng-zorro-antd
: 使用的第三方组件库,其内部使用到了 angular 内置的国际化文件
Angular
我们一般不会直接使用内置的 i18n,这里会使用 ngx-translate
。而我们使用的 ng-zorro-antd
组件库其需要用到内置的 i18n。因此这里我们只是讲解一下如何进行切换。
一般指定内置的语言有两种:一种是在 AppModule 中直接指定。另外一种是使用 registerLocaleData
管道动态加载
import { LOCALE_ID, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from '../src/app/app.component'
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
providers: [ { provide: LOCALE_ID, useValue: 'fr' } ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
import { registerLocaleData } from '@angular/common'
import localeFr from '@angular/common/locales/fr'
registerLocaleData(localeFr, 'fr');
ngx-translate
在安装 ngx-translate 的时候最少需要安装这两个主要的模块:@ngx-translate/core
和 @ngx-translate/http-loader
。一个是其核心模块,一个是其加载模块,使用 HttpClient 加载对应的国际化文件
定义并加载国际化文件
import { NgModule } from '@angular/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'
import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http'
import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
@NgModule({
imports: [
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (http: HttpClient) => {
// 国际化的文件地址
return new TranslateHttpLoader(http, '../assets/i18n/', '.json')
},
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule {}
动态切换语言
import { Component, OnInit } from '@angular/core'
import { TranslateService } from '@ngx-translate/core'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.less']
})
export class LayoutComponent implements OnInit {
constructor(private translate: TranslateService) {}
ngOnInit() {
// 这里值得是国际化的文件名
his.translate.setDefaultLang('zh')
}
}
模板中使用
<span>{{ 'username' | translate }}</span>
ng-zorro-antd
import { Component, OnInit } from '@angular/core'
import { zh_CN, en_US, NzI18nService } from 'ng-zorro-antd'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.less']
})
export class LayoutComponent implements OnInit {
constructor(private nzI18n: NzI18nService) {}
ngOnInit() {
this.nzI18n.setLocale(zh_CN)
}
}
完整的示例
import { Component, OnInit } from '@angular/core'
import { registerLocaleData } from '@angular/common'
import zh from '@angular/common/locales/zh'
import en from '@angular/common/locales/en'
import { TranslateService } from '@ngx-translate/core'
import { zh_CN, en_US, NzI18nService } from 'ng-zorro-antd'
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.less']
})
export class LayoutComponent implements OnInit {
private local = 'zh'
constructor(
private login: LoginService,
private translate: TranslateService,
private nzI18n: NzI18nService
) {}
ngOnInit() {
this.setLoacl()
}
setLoacl() {
// 同步切换
registerLocaleData(this.local === 'en' ? en : zh)
this.nzI18n.setLocale(this.local === 'en' ? en_US : zh_CN)
this.translate.setDefaultLang(this.local)
}
// 切换语言的事件
resetLocal() {
if (this.local === 'en') {
this.local = 'zh'
} else {
this.local = 'en'
}
this.setLoacl()
}
}