如何在Angular 15中实现文本框内部分文本加粗显示

首先明确：原生<input>元素无法渲染HTML富文本（比如加粗效果），因为它的value属性只能显示纯文本。要实现需求里的部分文本加粗，需要换用支持HTML渲染的元素模拟输入框效果，同时遵循Angular的数据绑定规范，避免直接操作DOM。

步骤1：替换input为可编辑div（模拟只读输入框） #

用contenteditable="false"的div替代input，同时保留原有的form-control样式，保证视觉上和原输入框一致。

步骤2：组件TS代码优化 #

移除直接操作DOM的逻辑，改用组件属性存储动态数值，通过getter生成带HTML标签的文本：

// 组件类中定义动态数值（示例值，实际根据业务逻辑赋值）
selectedSubscriber = 2;

// 生成带加粗格式的文本
get displayText(): string {
  return `Subscriber Groups <strong>(${this.selectedSubscriber})</strong>`;
}

步骤3：HTML模板绑定 #

使用[innerHTML]指令渲染带HTML的文本：

<div 
  id="Subscribers"
  class="form-control"
  contenteditable="false"
  style="min-height: calc(1.5em + .75rem + 2px); padding: .375rem .75rem;"
  [innerHTML]="displayText">
</div>

补充说明 #

• contenteditable="false"确保div无法被用户编辑，模拟只读input的行为
• 额外的内联样式是为了匹配form-control默认的行高和内边距，避免视觉差异
• 不要用原代码中document.getElementById操作DOM的方式，Angular的数据绑定可以更安全、高效地更新视图

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