Angular 4 i18n - 添加翻译文件后如何继续

typescript

# Angular 4 i18n: 添加翻译文件后的进一步步骤

Angular 4提供了强大的国际化（i18n）支持，使得在应用中集成多语言变得相对简单。一旦你已经创建了翻译文件并进行了基本的设置，接下来的步骤将帮助你更进一步，以确保你的应用能够完全支持多语言环境。

## 1. 引入翻译服务

首先，确保你的应用中引入了Angular的TranslateService。这是Angular i18n的核心服务，用于在应用中管理和加载翻译。

typescript
// app.module.ts
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';
// 创建TranslateLoader，用于加载翻译文件
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.JSon');
}
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

确保你在assets文件夹下创建了i18n文件夹，并将翻译文件（比如en.JSon和fr.JSon）放置其中。

## 2. 在组件中使用TranslateService

在你的组件中，使用TranslateService来获取翻译文本。以下是一个简单的示例：

typescript
// app.component.ts
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
  selector: 'app-root',
  template: <code>
    <h1>{{ 'HELLO' | translate }}</h1>
    
{{ 'WELCOME_MESSAGE' | translate:{ value: 'Angular' } }}
  </code>
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en'); // 设置默认语言
    translate.use('en'); // 使用英文
  }
}

确保在模板中使用translate管道来标记需要翻译的文本。

## 3. 添加更多语言支持

要添加更多语言支持，只需在TranslateService中调用use方法，切换到相应的语言。例如，切换到法语：

typescript
this.translate.use('fr');

##

通过以上步骤，你可以轻松地集成Angular 4的国际化支持，并根据需要添加更多语言。确保你的翻译文件完整并包含应用中所有需要翻译的文本，以提供一流的多语言用户体验。