Angular 7中带有复数/选择的属性的国际化（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"。

有没有一种方法可以在HTML属性中获取复数形式的i18n，而不需要复制元素并使用 *ngIf？ 这里有一个具有工作示例的Stackblitz

- ShamPooSham

Answer 1

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

一个(相对较差的)解决方法是将该表达式放入一个不可见的DOM节点（例如模板），对该DOM节点进行国际化，并在占位符中插入该DOM节点的文本。

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

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

注意：应该使用<template>而不是<ng-template>！

- JB Nizet

---

谢谢！在收到你的回答之前，我已经自己解决了这个问题。虽然不太美观，但目前它能够正常工作。希望 Angular 在未来能够更加简便地解决这个问题。 - ShamPooSham

这个解决方案在 Angular 14 中对我不再起作用了。innerText 属性是空字符串。有什么想法如何修复它？ 编辑：使用 <span style="display:none"> 而不是 <template> 似乎可以工作，但这很糟糕。 - petriq

Answer 2

使用i18nPlural管道可以解决这个问题。

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

- vasi1y