Angular 如何通过@Pipe装饰器为动态文本中的指定词汇添加相对路由链接

核心问题成因 #

通过innerHTML渲染的动态HTML片段，完全不经过Angular的模板编译流程，这是交互失效的根本原因：

• 片段内写的routerLink不会被Angular识别为内置指令，不会绑定对应的点击拦截逻辑
• 浏览器只会把routerLink当成无意义的自定义属性，点击时根本触发不了路由跳转
• Angular默认的DomSanitizer会对动态插入的HTML做安全清洗，带交互属性的内容可能直接被过滤失效

方案一：基于自定义Pipe的改造实现 #

Pipe的核心作用是纯数据转换，不适合直接输出带框架交互指令的HTML内容，正确的用法是：

• 让Pipe接收原始文本、匹配规则参数，输出拆分好的结构化片段数组，数组元素需标记：哪些片段是需要跳转的目标词、对应的相对路由地址是什么
• 在组件模板中遍历结构化数组，对匹配到的目标词用原生routerLink标签渲染，非匹配片段直接渲染纯文本
  模板示例：

<ng-container *ngFor="let segment of (inputText | linkify: matchConfig)">
  <a *ngIf="segment.isTarget" [routerLink]="segment.relativeRoute" class="text-link">{{ segment.word }}</a>
  <ng-container *ngIf="!segment.isTarget">{{ segment.word }}</ng-container>
</ng-container>

这种方式的优势是所有带路由跳转的元素都是在模板编译阶段生成的，routerLink的绑定逻辑会正常生效。

方案二：自定义Directive实现（生产环境推荐） #

相比Pipe的实现方式，指令的适配性更强，适合文本频繁动态更新的场景：

• 将指令挂载在承载动态文本的容器元素上，在指令内部注入Router服务
• 监听容器内的文本变化，按照预设的匹配规则定位目标词汇的DOM节点位置
• 将目标词汇对应的文本节点替换为原生<a>标签，为标签绑定点击事件，事件触发时直接调用router.navigateByUrl()方法跳转至对应相对路由
• 实现增量DOM对比逻辑，避免文本每次更新都全量重绘容器内容，降低性能损耗
  这种方式不需要依赖Angular对动态插入内容的解析能力，从根本上解决innerHTML渲染内容无法触发框架交互的问题。

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