Angular 7 中具有 pluralization/selection 的属性的 i18n

Question

小问题

我可以有一个占位符文本根据组件状态而变化的输入元素吗？

更长的问题

Angular 可以通过以下语法示例添加 i18n：

<input i18n-placeholder placeholder="default placeholder" />

还可以通过以下语法示例添加复数规则：

<span i18n>
    Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}
</span>

我尝试合并这两个功能，以便占位符的文本根据组件的状态而变化。组件模板包含以下 html:

<input i18n-placeholder placeholder="Add {stuff.length, plural, =0 {} other {more}} stuff..." />

我希望占位符在单数情况下说 Add stuff...，在复数情况下说 Add more stuff...，但我在占位符中得到的只是 Add。

有没有办法在不复制元素和使用 *ngIf 的情况下在 html 属性中获得复数 i18n？

Answer 1

这实际上与 i18n 没有太大关系。它仅表明 Angular 似乎无法正确解析和处理属性内部的复数表达式。

A (relatively dirty) workaround 只是将该表达式放在一个不可见的 DOM 节点（例如模板）中，以 i18n 这个 dom 节点，并插入文本占位符内的 DOM 节点：

<input #myInput [placeholder]="ph.innerText">

<ng-template #ph i18n>Add {stuff.length, plural, =0 {} other {more}} stuff...</ng-template>

Answer 2

有一个使用 i18nPlural 管道的解决方案。

<input placeholder="{{ stuff.length | i18nPlural : {
    '=0': 'No stuff.',
    '=1': 'One stuff.',
    'other': '# stuff.'} }}">

i18n on attributes with pluralization/selection in Angular 7