1. 安装 Angular CLI：
确保你的项目中已经使用 Angular CLI 进行初始化。如果没有，可以使用以下命令安装：
ng new your-i18n-app
cd your-i18n-app
2. 启用国际化支持：
在 Angular 项目中启用国际化支持需要在 angular.json 文件中进行配置。打开 angular.json 文件，找到 i18n 配置：
{
// ...
"projects": {
"your-i18n-app": {
// ...
"architect": {
"build": {
"configurations": {
"production": {
// ...
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": "src/locale/messages.fr.xlf",
"de": "src/locale/messages.de.xlf"
}
}
}
}
}
}
}
}
}
上述配置表示你的项目支持英语（en-US）、法语（fr）和德语（de）。你可以根据需要添加其他语言。
3. 提取翻译文本：
使用以下命令从应用中提取待翻译的文本：
ng extract-i18n
这将在项目根目录下生成一个 messages.xlf 文件。你可以根据需要将其复制为不同语言的文件，例如 messages.fr.xlf、messages.de.xlf 等。
4. 翻译文本：
打开生成的 .xlf 文件，将其中的文本进行翻译。确保每个目标语言都有相应的 .xlf 文件。
5. 编译应用：
使用以下命令编译应用以支持多语言：
ng build --prod --localize
6. 运行应用：
使用以下命令启动应用：
ng serve --configuration=fr
这将启动一个法语版本的应用。你可以通过 --configuration 参数来指定其他语言版本。
7. 动态切换语言：
你可以使用 Angular 的 LOCALE_ID 服务动态切换语言。在组件中注入 LOCALE_ID，然后使用 setLocale 方法切换语言。
import { Component, Inject, LOCALE_ID } from '@angular/core';
import { DOCUMENT } from '@angular/common';
@Component({
selector: 'app-root',
template: `
<button (click)="switchLanguage('en-US')">English</button>
<button (click)="switchLanguage('fr')">Français</button>
`,
})
export class AppComponent {
constructor(@Inject(DOCUMENT) private document: Document, @Inject(LOCALE_ID) private locale: string) {}
switchLanguage(language: string): void {
this.document.documentElement.lang = language;
this.locale = language;
}
}
这就是基本的 Angular 国际化的步骤。通过这些步骤，你可以构建一个支持多语言的 Angular 应用。请确保查阅 Angular 的官方文档以获取更详细的信息和示例。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4964/Angular