时间戳

首页 > 解决方案 > i18n 关于 Angular 7 中具有复数/选择的属性

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

问题描述

简短的问题

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

更长的问题

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？

这是一个带有工作示例的堆栈闪电战

标签： angularinternationalizationangular7angular-i18n

解决方案

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

一个（相对脏的）解决方法是简单地将该表达式放在一个不可见的 DOM 节点（例如模板）中，到 i18n 这个 dom 节点，并将该 DOM 节点的文本插入到占位符中：

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

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

推荐阅读