Angular $localize：如何在属性中使用占位符？

一、文本内容的占位符写法（你找到的方案说明） #

你提到的ng-container写法是可行的，它通过注释标记占位符，让i18n工具识别并保留占位符用于后续替换：

<ng-container i18n="@@ID">{{ 'CUSTOM PLACEHOLDER VALUE' // i18n(ph="PH") }}</ng-container>

这里的// i18n(ph="PH")是给i18n提取工具的标记，将CUSTOM PLACEHOLDER VALUE定义为占位符PH的默认值，翻译时可以针对不同语言替换该占位符对应的内容。

二、属性（如placeholder）的占位符实现 #

针对input的placeholder这类属性，需要在i18n-*指令中直接定义占位符参数，同时在属性值中设置默认内容，具体写法如下：

1. 静态占位符定义

<input
  i18n-placeholder="@@searchInputPlaceholder;{ph:'请输入关键词'}"
  placeholder="请输入关键词"
/>

• @@searchInputPlaceholder是翻译ID，用于关联翻译文件中的对应条目；
• {ph:'请输入关键词'}定义了占位符ph及其默认值，提取翻译时工具会识别这个参数，生成的翻译文件中可以替换占位符内容。

2. 运行时动态替换占位符

如果需要在运行时动态修改占位符的实际值，可以结合组件变量绑定：
组件类中定义变量：

dynamicPlaceholder = '动态搜索关键词';

HTML中绑定并关联占位符：

<input
  i18n-placeholder="@@searchInputPlaceholder;{ph:dynamicPlaceholder}"
  [placeholder]="dynamicPlaceholder"
/>

或者使用$localize直接处理翻译与占位符替换：

<input
  [placeholder]="$localize`:@@searchInputPlaceholder:${dynamicPlaceholder}`"
/>

内容的提问来源于stack exchange，提问作者user2622344