用于以多种语言输入文本的 Angular 多语言输入字段答案

【问题标题】：Angular multi-language input field for entering text in multiple languages用于以多种语言输入文本的 Angular 多语言输入字段
【发布时间】：2022-02-06 17:28:03
【问题描述】：

我正在开发一个使用 Angular 12 和 ASP.NET Core 6 作为后端的多语言 Web 应用程序。在大多数情况下，与后端的所有交互都是简单的 CRUD 操作。在许多情况下，应用程序中使用的实体具有属性（例如名称），这些属性具有不同的值，具体取决于（浏览器）语言。这意味着，根据前端的语言，应该为这些属性显示不同的值。为此，后端返回诸如字典之类的属性，其中键是语言，值是特定语言中属性的翻译。这是一个例子：

 id: 1,
      name: {
        en: "Apple",
        de: "Apfel",
      },
...

然后前端使用浏览器语言来决定应该显示哪种翻译。如果浏览器语言没有翻译，将使用英文翻译。对于静态文本，例如控件的标签、标题等，使用 ngx-translate。

这种方法已经非常好用了，但是目前还没有办法让用户在通过前端创建新实体时指定多个翻译。相反，属性是通过像这样的 mat-form-field 输入的：

<mat-form-field>
  <mat-label>{{ "translations.name" | translate }}</mat-label>
  <input matInput formControlName="name" />
  <mat-error
    *ngIf="createForm.hasError('required', 'name')"
    [innerHtml]="'translations.errors.required' | translate | markdown"
  ></mat-error>
</mat-form-field>

然后将输入的文本添加到名称字典中，并以当前浏览器语言为键。

我现在正在寻找一种方法，用支持为不同语言输入多个字符串的东西替换这个标准输入字段。我希望这个输入字段类似于普通的文本输入字段，但带有一个额外的按钮/图标，可以打开一个新对话框，可以为不同的语言输入多种翻译（例如在表格中）。这样的控件是否已经存在，还是我必须自己实现？

【问题讨论】：

这是你必须自己实现的东西。

标签： html angular internationalization ngx-translate angular12

【解决方案1】：

我认为这是您自己实现的东西，但是，您可以使用支持多语言输入的 3rd-party 库，例如 Angular Formly。

这是他们的相关示例，您可以使用或查看它是如何实现的，以使用ngx-translate 实现类似的东西：

https://formly.dev/examples/advanced/i18n

【讨论】：