Angular模板中如何为data-title属性绑定TOOLTIP文本并应用管道

实现核心逻辑 #

Angular模板中，所有需要动态赋值、或是对绑定值应用管道的属性（包括data-*类自定义属性），都必须通过方括号包裹的属性绑定语法实现，不能将插值表达式直接裸写在属性值位置。

操作步骤 #

• 确认组件TS文件中的TOOLTIP对象是公开可访问的属性，模板可正常读取：

  // 组件类内定义示例
  export class TopographyEditComponent {
    // 不要加private等私有修饰符
    public readonly TOOLTIP = {
      EDIT_TOPOGRAPHY: 'Edit Topography'
    };
  }
  

• 模板中对data-title启用方括号绑定，直接在绑定表达式后追加需要应用的管道：

  <button 
    class="btn btn-sm btn-icon"
    <!-- 核心实现：方括号标记动态绑定，表达式内直接串联管道 -->
    [data-title]="TOOLTIP.EDIT_TOPOGRAPHY | 实际使用的管道名称"
    (click)="editTopography()"
    data-tooltip="text"
  >
    <clr-icon shape="pencil"></clr-icon>
  </button>
  

注意事项 #

• 不推荐直接编写data-title="{{ TOOLTIP.EDIT_TOPOGRAPHY | pipe }}"这类无方括号的插值写法：该写法虽在多数场景可运行，但值为空时会自动移除对应属性、特殊字符场景会出现解析截断，统一使用方括号绑定可规避这类问题。
• 管道的使用规则和普通文本、对象绑定场景完全一致，无需为data-*属性做特殊适配。
• 当前使用的Clarity UI tooltip组件配置data-tooltip="text"后，会自动读取绑定后的data-title值作为悬停提示内容，无需额外传递值。

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