Transloco 开源项目教程
项目介绍
Transloco 是一个强大的 Angular 国际化(i18n)库,旨在简化应用程序的本地化过程。它提供了灵活的 API 和丰富的功能,使得开发者可以轻松地管理多语言内容。Transloco 支持懒加载、插件扩展以及动态语言切换,非常适合构建全球化的 Angular 应用。
项目快速启动
安装 Transloco
首先,你需要在你的 Angular 项目中安装 Transloco:
npm install @ngneat/transloco
配置 Transloco
在 Angular 项目的根模块(通常是 app.module.ts
)中配置 Transloco:
import { TranslocoModule, TRANSLOCO_CONFIG, TranslocoConfig } from '@ngneat/transloco';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
HttpClientModule,
TranslocoModule
],
providers: [
{
provide: TRANSLOCO_CONFIG,
useValue: {
prodMode: environment.production,
availableLangs: ['en', 'es'],
defaultLang: 'en',
reRenderOnLangChange: true,
missingHandler: {
useFallbackTranslation: true
}
} as TranslocoConfig
}
]
})
export class AppModule {}
添加翻译文件
在 assets
文件夹下创建一个 i18n
文件夹,并添加你的翻译文件,例如 en.json
和 es.json
。
// en.json
{
"welcome": "Welcome to Transloco!"
}
// es.json
{
"welcome": "Bienvenido a Transloco!"
}
使用 Transloco
在你的组件或模板中使用 Transloco:
<!-- app.component.html -->
<h1>{{ 'welcome' | transloco }}</h1>
应用案例和最佳实践
动态语言切换
Transloco 支持动态语言切换,用户可以在运行时更改应用的语言。以下是一个简单的实现示例:
import { TranslocoService } from '@ngneat/transloco';
@Component({
selector: 'app-language-switcher',
template: `
<button (click)="switchLanguage('en')">English</button>
<button (click)="switchLanguage('es')">Español</button>
`
})
export class LanguageSwitcherComponent {
constructor(private translocoService: TranslocoService) {}
switchLanguage(lang: string) {
this.translocoService.setActiveLang(lang);
}
}
懒加载翻译文件
对于大型应用,你可以使用懒加载来优化性能:
import { TRANSLOCO_LOADER, TranslocoLoader } from '@ngneat/transloco';
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
constructor(private http: HttpClient) {}
getTranslation(lang: string) {
return this.http.get(`/assets/i18n/${lang}.json`);
}
}
@NgModule({
providers: [
{ provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
]
})
export class AppModule {}
典型生态项目
Transloco 可以与许多其他 Angular 库和工具集成,以下是一些典型的生态项目:
- Angular Material: 与 Angular Material 组件库结合使用,提供本地化的 UI 组件。
- Nx: 在 Nx 工作区中使用 Transloco,管理多项目和多语言内容更加方便。
- Storybook: 在 Storybook 中使用 Transloco,为你的组件库提供多语言支持。
通过这些集成,你可以构建更加强大和灵活的 Angular 应用,满足不同用户的需求。