1. 创建一个新的 Angular 项目：
ng new i18n-example
cd i18n-example
2. 安装 ngx-translate/core 和 ngx-translate/http-loader：
npm install @ngx-translate/core @ngx-translate/http-loader --save
3. 创建翻译文件：
在 src/assets/i18n 目录下，创建两个翻译文件 en.json 和 fr.json：
// en.json
{
"greeting": "Hello, World!",
"language": "English"
}
// fr.json
{
"greeting": "Bonjour, le monde !",
"language": "Français"
}
4. 配置翻译服务：
在 src/app/app.module.ts 文件中配置 ngx-translate/core 模块：
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';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
declarations: [],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
}),
],
bootstrap: [],
})
export class AppModule {}
5. 创建一个组件来显示翻译内容：
// src/app/app.component.ts
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-root',
template: `
<h1>{{ 'greeting' | translate }}</h1>
<p>{{ 'language' | translate }}</p>
<button (click)="switchLanguage()">Switch Language</button>
`,
})
export class AppComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
this.switchLanguage();
}
switchLanguage() {
const lang = this.translate.currentLang === 'en' ? 'fr' : 'en';
this.translate.use(lang);
}
}
6. 运行应用：
启动应用并查看效果：
ng serve
打开浏览器，访问 http://localhost:4200/，你应该看到一个显示 "Hello, World!" 和 "English" 的页面。点击 "Switch Language" 按钮，应用将切换到法语版本。
这是一个简单的 Angular 国际化示例，使用了 ngx-translate/core 库。你可以根据实际需求扩展和修改。这个库的优势之一是它提供了更灵活的方式来处理多语言内容，尤其是在应对较复杂的翻译需求时。
转载请注明出处：http://www.zyzy.cn/article/detail/4974/Angular