要在Angular 8中进行错误消息的插值国际化,你可以使用Angular的内置国际化库ngx-translate。以下是一个使用ngx-translate的代码示例:
npm install @ngx-translate/core @ngx-translate/http-loader --save
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
{
"error.message": "An error occurred: {{error}}"
}
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-my-component',
template: `{{ errorMessage | translate:{error: errorObject} }}`
})
export class MyComponent {
errorObject = { /* 错误对象 */ };
errorMessage: string;
constructor(private translate: TranslateService) {
this.translate.get('error.message').subscribe((res: string) => {
this.errorMessage = res;
});
}
}
在上述代码中,使用{{ errorMessage | translate:{error: errorObject} }}来插入错误消息,并使用this.translate.get('error.message')来获取翻译后的错误消息。
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: ` `
})
export class AppComponent {
constructor(private translate: TranslateService) {
this.translate.setDefaultLang('en');
this.translate.use('en');
}
}
在上述代码中,将默认语言设置为英语(en)。
这样,你就可以在Angular 8中使用ngx-translate来国际化错误消息的插值了。