Angular提供了本地化库,可以在不为每种语言构建重复的应用程序的情况下创建多语言应用程序。在应用程序中使用ngx-translate或@ngx-i18n /extract和@ngx-i18n /compile。以下是使用ngx-translate的示例:
安装ngx-translate:npm install @ngx-translate/core --save
在app.module.ts文件中导入NgxTranslate模块并设置默认语言:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { HttpClientModule, HttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({ imports: [ BrowserModule, HttpClientModule, // ngx-translate and the loader module TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (http: HttpClient) => { return new TranslateHttpLoader(http); }, deps: [HttpClient] } }) ], declarations: [AppComponent], bootstrap: [AppComponent] })
export class AppModule { }
{ "HOME": "Home", "ABOUT": "About", "CONTACT": "Contact", "WELCOME": "Welcome to my website!" }
import { Component } from '@angular/core'; import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template:
})
export class AppComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
}
}{{'WELCOME' | translate}}
现在你可以在Angular应用程序中使用ngx-translate来创建多语言应用程序。只需根据需要添加其他语言JSON文件即可。