Angular中如何使用i18n翻译@Input绑定的属性值？

针对自定义组件输入属性的国际化需求，有两种模板层面的标准实现方案，你之前的写法不生效是因为不符合Angular i18n的语法规则，按需选择方案即可。

方案1：静态属性搭配i18n专属标记（静态文本场景推荐） #

如果传入的是固定文案，不要使用方括号做属性绑定，直接将值写为普通静态属性，再加上i18n-<属性名>格式的标记即可，写法和普通DOM属性的i18n标记完全一致：

<app-button color="black"
            label="Manage"
            i18n-label="操作栏管理按钮|按钮展示的操作文案@@manageButtonLabel"
></app-button>

标记内的写法遵循普通i18n规则：含义|描述@@自定义翻译ID，其中描述和自定义ID为可选内容，添加固定自定义ID可以避免文案微调时翻译单元被重复生成。执行i18n提取命令时，Angular会自动识别该标记，将label属性对应的文案纳入翻译表。

方案2：属性绑定搭配$localize内联标记（动态绑定场景适用） #

如果必须使用[label]方括号绑定形式（比如后续需要拼接变量、或是统一使用绑定写法），不需要额外添加i18n属性，直接在绑定的字符串外包裹$localize标记即可：

<app-button [color]="'black'"
            [label]="$localize`:@@manageButtonLabel:Manage`"
></app-button>

这种写法同样能被i18n提取工具正常识别，最终翻译效果和静态属性标记完全一致。

注意：两种方案不要混写，比如同时使用[label]方括号绑定和i18n-label标记，会导致i18n标记无法被识别。

之前尝试的写法不生效的原因 #

• 直接在组件标签上加i18n：该标记仅会翻译组件标签包裹的内嵌内容，不会处理任何输入属性，完全无法触及传入label的传值
• 添加i18n-label但同时使用[label]绑定：i18n-*格式的静态标记仅能处理不带方括号的静态属性值，不会拦截方括号内的绑定表达式
• 写i18n-[label]：不符合Angular i18n的语法设计，框架无法识别该标记

内容的提问来源于stack exchange，提问作者Louis 'LYRO' Dupont