Angular 中如何处理多语言-JavaScript中文网-JavaScript教程资源分享门户

随着全球化的加速和互联网的普及，多语言网站已经成为了现代网站开发的必要条件。在 Angular 中，处理多语言可以通过 Angular 自带的国际化库 @angular/localize 和第三方库 ngx-translate/core 来实现。本文将介绍这两个库的使用方法，并提供示例代码，帮助读者更好地理解和应用多语言开发。

Angular 国际化库 @angular/localize

Angular 国际化库 @angular/localize 是 Angular 官方提供的国际化解决方案。它支持多种语言，包括中文、英文、法语、德语、西班牙语等等，而且可以在 Angular 应用的各个组件中使用。下面是使用 @angular/localize 的基本步骤：

步骤一：安装 @angular/localize

在 Angular 项目中，首先需要安装 @angular/localize 库，可以使用以下命令进行安装：

npm install @angular/localize --save

步骤二：生成语言文件

在项目中生成语言文件，可以使用 Angular CLI 提供的 ng xi18n 命令。该命令会在 src/locale 目录下生成 messages.xlf 文件，该文件包含了项目中所有需要翻译的文本。下面是 ng xi18n 命令的使用方法：

ng xi18n --output-path src/locale

步骤三：翻译语言文件

使用翻译工具（如 Poedit）对 messages.xlf 文件进行翻译，并生成对应的语言文件。例如，如果需要将英文翻译成中文，可以生成 messages.zh-CN.xlf 文件。

步骤四：配置应用

在 Angular 应用中，需要在 app.module.ts 中导入 @angular/localize 库，并配置 LocalizeRouterModule。下面是 app.module.ts 的示例代码：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LocalizeRouterModule } from '@gilsdav/ngx-translate-router';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LocalizeRouterModule.forRoot(routes, {
      parser: {
        provide: TranslateParser,
        useFactory: translateParserFactory,
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

步骤五：使用翻译文本

在 Angular 应用中，可以使用 translate 指令来使用翻译文本。下面是示例代码：

<h1>{{ 'HELLO_WORLD' | translate }}</h1>

其中，HELLO_WORLD 是需要翻译的文本。

第三方库 ngx-translate/core

除了 Angular 自带的国际化库 @angular/localize，还有第三方库 ngx-translate/core 可以用来处理多语言。相比 @angular/localize，ngx-translate/core 更加灵活，支持多种语言格式，比如 JSON、YAML 等等。下面是使用 ngx-translate/core 的基本步骤：

步骤一：安装 ngx-translate/core

可以使用以下命令安装 ngx-translate/core：

npm install @ngx-translate/core --save

步骤二：配置应用

在 Angular 应用中，需要在 app.module.ts 中导入 TranslateModule，并配置 TranslateService。下面是 app.module.ts 的示例代码：

// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
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);
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

步骤三：翻译文本

在 Angular 应用中，可以使用 TranslateService 来翻译文本。下面是示例代码：

// javascriptcn.com 代码示例
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.addLangs(['en', 'zh']);
    translate.setDefaultLang('en');
    const browserLang = translate.getBrowserLang();
    translate.use(browserLang.match(/en|zh/) ? browserLang : 'en');
  }
}

步骤四：使用翻译文本

在 Angular 应用中，可以使用 translate 管道来使用翻译文本。下面是示例代码：

<h1>{{ 'HELLO_WORLD' | translate }}</h1>

其中，HELLO_WORLD 是需要翻译的文本。

总结

本文介绍了在 Angular 中处理多语言的两种方法：Angular 自带的国际化库 @angular/localize 和第三方库 ngx-translate/core。这两种方法都可以很好地实现多语言开发，读者可以根据自己的实际需求选择合适的方法。无论使用哪种方法，处理多语言的基本步骤都是相似的，包括安装库、生成语言文件、翻译文本和配置应用。希望本文对读者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658173d7d2f5e1655dcad8fa