Transloco 开源项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00163/article/details/141413441

Transloco 开源项目教程

transloco🚀 😍 The internationalization (i18n) library for Angular项目地址:https://gitcode.com/gh_mirrors/tr/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 {}