i18n 关于 Angular 7 中具有复数/选择的属性答案

【问题标题】：i18n on attributes with pluralization/selection in Angular 7i18n 关于 Angular 7 中具有复数/选择的属性
【发布时间】：2019-11-14 02:03:01
【问题描述】：

小问题

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

更长的问题

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？

【问题讨论】：

【解决方案1】：

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

(relatively dirty) workaround 将简单地将该表达式放在一个不可见的 DOM 节点（例如模板）中，将该 DOM 节点插入到 i18n 中，并将该 DOM 节点的文本插入到占位符中：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：