如何在Angular 19 Material matTooltip中转换显示Markdown链接

Angular Material默认的matTooltip仅支持纯文本，要在tooltip里展示可点击的Markdown链接，需通过自定义模板式tooltip结合ngx-markdown实现，具体操作如下：

1. 替换为模板式Tooltip #

将原按钮上的[matTooltip]绑定替换为[matTooltipTemplate]，并定义对应的<ng-template>承载富内容：

<button
  mat-stroked-button
  [matTooltipTemplate]="tooltipContent"
  matTooltipShowDelay="1000"
  matTooltipPosition="above"
  matTooltipClass="tooltip-btn">
  <mat-icon class="icon icon--smd">archive</mat-icon>
  <span>
    <markdown class="doc-list__item" [data]="source.linkText"></markdown>
  </span>
</button>

<!-- 自定义Tooltip内容模板 -->
<ng-template #tooltipContent>
  <div class="tooltip-content">
    {{ source.fileName }}
    <br>
    {{ source.pageNoText }}
    <br>
    <!-- 用ngx-markdown解析Markdown链接为可点击元素 -->
    <markdown [data]="source.linkText"></markdown>
    <br>
    {{ source.snippet }}
  </div>
</ng-template>

2. 调整Tooltip样式 #

默认Tooltip不会给链接添加可交互样式，需在全局或组件样式中补充：

.tooltip-btn .tooltip-content a {
  color: #1976d2; /* 匹配Angular Material主题色 */
  text-decoration: underline;
  cursor: pointer;
}

.tooltip-btn .tooltip-content {
  white-space: pre-line; /* 保留文本换行效果 */
}

补充说明 #

• 模板式Tooltip支持直接嵌入Angular组件，因此ngx-markdown能正常将Markdown链接解析为可点击的<a>标签。
• 可通过white-space: pre-line保留原文本中的换行，或用<br>标签手动换行。
• 链接点击行为与普通<a>标签一致，如需修改打开方式（如在当前页打开），可通过ngx-markdown的自定义渲染器配置调整。

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