在当今全球化的时代，跨语言的应用程序越来越普遍。为了让应用程序能够更好地满足用户的需求，我们需要使用国际化技术来支持多语言。在 Angular 中，我们可以使用 i18n 来实现国际化。
什么是 i18n?
i18n 是国际化的缩写，其中的 18 代表了中间的 18 个字符。i18n 是一种将应用程序中的文本翻译成多种语言的技术。通过 i18n，我们可以轻松地支持多种语言，使得用户可以在他们的首选语言中使用应用程序。
如何在 Angular 中使用 i18n?
在 Angular 中，我们可以使用 Angular 提供的 i18n 模块来实现国际化。首先，我们需要在项目中引入 @angular/localize 模块。
// javascriptcn.com 代码示例
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (http: HttpClient) => {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
},
deps: [HttpClient]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }在上面的代码中，我们引入了 @ngx-translate/core 和 @ngx-translate/http-loader 模块，并在 imports 中进行了配置。我们还需要在项目中创建一个 assets/i18n/ 目录，用来存放多语言的 JSON 文件。
接下来，我们可以在组件中使用 translate 指令来实现国际化。在 HTML 模板中，我们可以将需要翻译的文本用 {{ 'key' | translate }} 的形式包裹起来，其中 key 是多语言 JSON 文件中的键名。
<h1>{{ 'app.title' | translate }}</h1>在多语言 JSON 文件中，我们可以为不同的语言设置不同的键值对。
{
"app.title": {
"en": "My App",
"zh": "我的应用"
}
}在上面的例子中，我们为英语和中文分别设置了 app.title 的值。
总结
通过 i18n，我们可以轻松地实现 Angular 应用程序的国际化。我们可以使用 @ngx-translate/core 和 @ngx-translate/http-loader 模块来实现多语言的加载和翻译。在 HTML 模板中，我们可以使用 translate 指令来实现文本的翻译。通过这些技术，我们可以为用户提供更好的体验，使得他们可以在他们的首选语言中使用应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650bf75e95b1f8cacd6099ce