Angular 4 i18n 用于自定义属性答案

【问题标题】：Angular 4 i18n for custom attributesAngular 4 i18n 用于自定义属性
【发布时间】：2018-03-01 01:55:06
【问题描述】：

有没有办法使用 Angular i18n AOT 转换子组件中的自定义属性值？

我知道我们可以如下翻译 HTML 元素属性。

 <input i18n-placeholder="search criteria date @@criteriaDate"
        placeholder="Date"
        formControlName="date" required>

但我想为我的组件属性做同样的事情。在这个例子中，我想传递 title 属性的翻译值。

 <custom-spinner
        formControlName="nights"
        [title]="'Nights'"
        i18n-title="search criteria nights@@criteriaNights">
      </custom-spinner>

当我尝试这个时，它不会在 messages.xlf 文件中生成条目。我找不到这方面的任何例子。

【问题讨论】：

那么，当你这样做时会发生什么？你试过了吗？
是的，我试过了。但这不会在 messages.xlf 文件中生成条目。我将更新问题。
只需使用title="Nights" i18n-title="search criteria nights@@criteriaNights"。这在这里工作得很好。当你想要传递的只是一个硬编码的字符串时，使用角度表达式和括号表示法是没有用的。
谢谢。有用！我们不必要地使用了括号符号。
语法 bind-title="Nights" i18n-bind-title="..." 有效吗？ bind-title 应该是 [title] 的规范形式。

标签： angular internationalization angular-i18n

【解决方案1】：

在 Angular 7 中测试。它默认工作。您不能对 i18n 文本使用 [title] 表示法。它应该是纯文本。

      <custom-spinner
        formControlName="nights"
        title="Nights"
        i18n-title="search criteria nights@@criteriaNights">
      </custom-spinner>

请注意，它也适用于任何属性。例如，my-attr 和 i18n-my-attr 将翻译 my-attr 中的文本。

【讨论】：

【解决方案2】：

试试这个语法。 i18n-xxx 基本上是供编译器识别的，因此它不遵循 Angular 模板绑定语法

<custom-spinner
 formControlName="nights"
 [title]="'Nights'"
 i18n-[title]="search criteria nights@@criteriaNights">
</custom-spinner>

【讨论】：

这不起作用。使用 Ivy，字符串不会被提取到 messages.xlf 中。

【解决方案3】：

您可以尝试使用 angular 属性绑定的 canonical form - 它也应该适用于 angular 4.4.6 和 typescript 2.3.4。我已经用这种环境证明了它：

Angular CLI: 1.6.8
Node: 6.10.0
OS: win32 x64
Angular: 5.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.8
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.8
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack: 3.10.0

请尝试此解决方案 - 我希望它会有所帮助：

<custom-spinner
 formControlName="nights"
 bind-title="'Nights'"
 i18n-bind-title="search criteria nights@@criteriaNights">
</custom-spinner>

【讨论】：