有没有办法用 Angular 来命名 i18n 中 html 组件的插值占位符？

Question

在 Angular 中，我使用本地化 (i18n) 来翻译应用程序中的字符串。我已经成功地在 TypeScript 文件中使用 $localize 模板文字来翻译带有动态占位符的字符串，如下所示：

this.createdBy = $localize`:@@CreatedBy:Created ${this.createdBy}:some_name:`;

但是，我正在寻找一种直接在 HTML 模板中实现类似动态翻译的方法，类似于上面的 TypeScript 示例。

是否可以使用 $localize 或 HTML 中的其他方法来翻译带有这样的动态占位符的字符串？

我希望翻译后的输出以类似于以下的格式存储在我提取的 JSON 文件中：

"CreatedBy": "Created {$some_name}"

不喜欢：

"CreatedBy": "Created {$INTERPOLATION}"

Answer 1

没有内置方法可以使用

$localize

或 HTML 中的其他方法来翻译带有动态占位符的字符串。但是，您可以使用一些解决方法。

<i18n-placeholder [placeholder]="some_name">
  Created {{some_name}}
</i18n-placeholder>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'i18n-placeholder',
  template: `
    Created {{placeholder}}
  `,
})
export class I18nPlaceholderComponent {
  @Input() placeholder: string;

  ngOnInit() {
    const translation = $localize`:@@CreatedBy:Created ${this.placeholder}:some_name:`;
    this.placeholder = translation;
  }
}