Angular 使用@ngx-translate和ngx-translate-messageformat编译器进行角度复数’;不能正确初始化
我执行了以下步骤 (1) 创建了新的angular cli项目(angular cli 1.5.0) (2) 添加的依赖项:Angular 使用@ngx-translate和ngx-translate-messageformat编译器进行角度复数’;不能正确初始化,angular,internationalization,Angular,Internationalization,我执行了以下步骤 (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文件: 断言/i18n/en.json { "translation": "translation",
npm i @ngx-translate/core @ngx-translate/http-loader messageformat ngx-translate-messageformat-compiler --save
(3) 添加了带翻译的JSON文件:
断言/i18n/en.json
{
"translation": "translation",
"things": "{count, plural, =0{Nothing} one{One thing} other{Lots of things}}"
}
asserts/i18n/de.json)
(4) 应用模块
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) 应用组件
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);
}
}
从'@angular/core'导入{Component};
从'@ngx translate/core'导入{TranslateService};
@组成部分({
选择器:'应用程序根',
模板:`
翻译
{'things'|翻译:{count:2}}
扩散系数
EN
`
})
导出类AppComponent{
构造函数(私有翻译:翻译服务){
translate.setDefaultLang('de');
this.translate.use('de');
addLangs(['en']);
}
选择lang(lang:string){
这个。翻译。使用(lang);
}
}
页面加载没有问题,并且正确地显示了简单的翻译(“Überschrift”),但多重化不起作用
奇怪的是,通过单击按钮“en”将语言更改为en可以获得所需的结果:
现在,切换回“De”也可以在德语中显示所需的结果
这方面有什么更新吗?
我使用的解决方法是等待语言完成设置后再显示模板。例如,在我的appComponent中,我将设置:
langReady= false;
constructor(private translate: TranslateService) {
translate.setDefaultLang('de')
translate.addLangs(['en']);
this.translate.use('de').subscribe(()=>{
this.langReady= true;
});
}
在我的模板中,我将设置一个*ngIf,等待语言准备好显示,如下所示:
<p *ngIf="timeElapsed">{{'things' | translate:"{ count: 1 }"}}</p>
{{'things'|翻译:{count:1}}
这不是一个非常优雅的解决方案,但它很有效。您是否找到了一种更好的设置消息编译器的方法?@herbstein:除了您提到的解决方案之外,您是否找到了解决方案?除了您提到的解决方案之外,您是否找到了其他解决方案?
<p *ngIf="timeElapsed">{{'things' | translate:"{ count: 1 }"}}</p>