如何轻松地使用ChatGPT翻译您的Angular应用程序
简化Angular i18n：使用ChatGPT和@ngx-translate自动翻译
向您的Angular应用程序添加翻译可能非常简单，特别是在使用像ChatGPT这样的先进语言模型的帮助下。对于那些更喜欢开源替代方案的用户，Ollama是一个不错的选择。本教程将指导您完成在Angular应用程序中设置翻译的过程，包括安装必要的软件包、配置您的应用程序，并使用ChatGPT来简化翻译过程。
步骤1：安装必要的软件包
首先安装所需的软件包：
npm install @ngx-translate/core --save
npm install @@ngx-translate/http-loader --save
第二步：配置您的Angular应用程序
使用 @ngx-translate/core 处理翻译。首先，创建一个用于翻译文件的加载程序函数：
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient} from "@angular/common/http";
export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
export const appConfig: ApplicationConfig = {
providers: [
// ...
importProvidersFrom(
TranslateModule.forRoot({
defaultLanguage: 'de',
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient],
},
})
),
]
};
步骤3：创建翻译文件
在src/assets/i18n/目录下为每种语言创建JSON文件。
德国
{
"HELLO": "Hallo {{name}}"
}
{ "title": "Welcome to our website", "description": "We are happy to have you here. Explore our products and services to learn more about what we offer." } Simplified Chinese (zh-cn.json): { "title": "欢迎来到我们的网站", "description": "很高兴您在这里。浏览我们的产品和服务，了解更多关于我们提供的内容。" }
{
"HELLO": "Hello, {{name}}!"
}
第四步：实现基本的语言切换
在您的组件中添加按钮以在不同语言之间进行切换，并设置翻译服务。
组件 TypeScript（app.component.ts）:
import { Component } from '@angular/core';
import {TranslateModule, TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-root',
standalone: true,
imports: [TranslateModule],
templateUrl: './app.component.html',
styleUrl: './app.component.scss'
})
export class AppComponent {
param: { name: string } = { name: 'World' };
constructor(
public translate: TranslateService
) {
translate.setDefaultLang('de');
translate.use('de');
}
changeLanguage(lang: string) {
this.translate.use(lang);
}
}
组件HTML（app.component.html）:
<div>
<button (click)="changeLanguage('de')">Deutsch</button>
<button (click)="changeLanguage('en')">Englisch</button>
</div>
{{ 'HELLO' | translate:param }}
步骤5：使用ChatGPT进行翻译
为了简化翻译流程，可以使用ChatGPT从您的Angular组件中提取文本内容，并生成翻译文件。以下是您可以操作的步骤：
与ChatGPT对话提示
通过提供一个提示，让ChatGPT可以高效地翻译你的Angular组件。例如：
I need to extract all text content from an Angular component's HTML that requires translation and convert it into a format suitable for i18n translation files. The output should include:
- **Updated HTML:** HTML content with translation IDs (placeholders) inserted.
- **Translation JSON:** JSON files for German (`de.json`) and English (`en.json`) with translation keys and their values.
Here is the original HTML:
<div>
<h1>Welcome to My Application</h1>
<p>Please login to continue</p>
</div>
Please provide:
1. Updated HTML with translation IDs in the format {{ 'TRANSLATION_ID' | translate }}.
2. JSON files for translations.
从ChatGPT的示例输出
更新后的HTML带有翻译标识符：
<div>
<h1>{{ 'WELCOME_HEADER' | translate }}</h1>
<p>{{ 'LOGIN_PROMPT' | translate }}</p>
</div>
翻译JSON文件:
资产/i18n/de.json（德语）:
{
"WELCOME_HEADER": "Willkommen in meiner Anwendung",
"LOGIN_PROMPT": "Bitte melden Sie sich an, um fortzufahren"
}
assets/i18n/zh.json (Chinese): { "Welcome": "欢迎", "Hello": "你好", "Goodbye": "再见", "Thank you": "谢谢", "Yes": "是", "No": "否" }
{
"WELCOME_HEADER": "Welcome to My Application",
"LOGIN_PROMPT": "Please login to continue"
}
摘要
- 更新的HTML：用翻译ID替换文本内容。
- 翻译JSON：为de.json和en.json中的每个ID提供翻译。
这种方法简化了国际化您的Angular应用程序，确保翻译字符串有条不紊且易于管理。
注意：不要忘记在所有独立组件的imports中包含TranslateModule。
已知问题（您可能需要纠正的问题）
属性翻译
Example 1
这是示例1的内容。
Hello, how are you?
Welcome to our website.
<button aria-label="Example icon-button with a menu"></button>
ChatGPT修改会引发错误
✘ [错误] NG8002: 无法绑定到 'aria-label'，因为它不是 'button' 的已知属性。[插件 angular-compiler]
<button aria-label="{{ 'MENU' | translate }}"></button>
手动更正:
<button [attr.aria-label]="'MENU' | translate"></button>
例如2
原文
<img alt="My image" />
ChatGPT 更改将抛出错误
✘ [错误] NG5002：解析器错误：在列27处出现意外标记 '}'，在[{{ ‘NO_IMAGE’ | translate }}]中
<img [attr.alt]="{{ 'NO_IMAGE' | translate }}" />
手动更正:
<img [attr.alt]="'NO_IMAGE' | translate" />
简短条件
Hello, welcome to our website. We hope you enjoy your visit here. Please feel free to contact us if you have any questions or need assistance. Thank you for your support.
{{ isEditMode ? 'Bearbeiten' : 'Neuer' }} Empfänger
ChatGPT 变化:
{{ isEditMode ? 'EDIT_MODE_TITLE' | translate : 'NEW_MODE_TITLE' | translate }}
手动更正:
{{ isEditMode ? ('EDIT_MODE_TITLE' | translate) : ('NEW_MODE_TITLE' | translate) }}
