我执行了以下步骤:
(1) 创建了一个新的angular-cli项目(angular-cli 1.5.0)
(2) 添加了依赖项:
npm i @ngx-translate/core @ngx-translate/http-loader messageformat ngx-translate-messageformat-compiler --save
(3)添加了带有翻译的JSON文件:
asserts/i18n/en.json
{
"translation": "translation",
"things": "{count, plural, =0{Nothing} one{One thing} other{Lots of things}}"
}
asserts/i18n/de.json)
{
"translation": "Übersetzung",
"things": "{count, plural, =0{Nichts} one{Ein Ding} other{Viele Dinge}}"
}
(4) AppModule
import { AppComponent } from './app.component';
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
},
compiler: {
provide: TranslateCompiler,
useClass: TranslateMessageFormatCompiler
}
}),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
(5) AppComponent
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: `
<h1 translate>translation</h1>
<p>{{'things' | translate:"{ count: 2 }"}}</p>
<button (click)="selectLang('de')">De</button>
<button (click)="selectLang('en')">En</button>
`
})
export class AppComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('de');
this.translate.use('de');
translate.addLangs(['en']);
}
selectLang(lang: string) {
this.translate.use(lang);
}
}
页面加载没有任何问题,也可以正确显示简单翻译(如“Überschrift”),但是复数形式无法正常工作。
好奇心驱使,点击“En”按钮将语言更改为英语,得到了期望的结果:
现在,切换回“De”语言也可以显示所需的德语结果。