1. 使用 ng xi18n 提取文本：
首先，你需要使用 Angular CLI 提供的 ng xi18n 命令从应用中提取待本地化的文本。执行以下命令：
ng xi18n
这将会在你的项目根目录下生成一个 messages.xlf 文件，其中包含了需要进行翻译的文本。
2. 创建本地化包文件：
针对每种语言，你需要创建一个相应的本地化包文件（通常是 XLIFF 格式的文件）。你可以手动创建这些文件，也可以使用翻译工具来生成。
例如，对于法语，可以创建一个 messages.fr.xlf 文件，并在其中翻译 messages.xlf 中的文本。
3. 配置 angular.json：
在 Angular 项目的 angular.json 文件中，需要配置应用以支持多语言。在 i18n 配置中，指定源语言和每个目标语言的本地化包文件路径。
{
// ...
"projects": {
"your-i18n-app": {
// ...
"architect": {
"build": {
"configurations": {
"production": {
// ...
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": "src/locale/messages.fr.xlf",
// Add other languages as needed
}
}
}
}
}
}
}
}
}
4. 编译应用以生成本地化版本：
使用以下命令编译应用，生成各个目标语言的版本。
ng build --prod --localize
5. 运行应用：
你可以通过 ng serve 命令启动一个特定语言版本的应用。例如，对于法语：
ng serve --configuration=fr
6. 切换语言：
你可以在应用中动态切换语言，通过 Angular 的 LOCALE_ID 服务和 DOCUMENT 服务来实现。在组件中注入这些服务，然后使用 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 的官方文档以获取更详细的信息和示例。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4966/Angular