Question

有没有办法使用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文件上生成一个条目。我找不到任何关于此的例子。

Answer 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内的文本。

Answer 2

您可以尝试canonical form角度属性绑定 - 它也可以使用角度4.4.6和打字稿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>

Answer 3

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

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

Angular 4 i18n用于自定义属性

3 个答案: