能否为经DomPurify清理的锚标签添加Angular指令？

DomPurify清理后的HTML属于静态插入内容，Angular的模板编译器不会对这类动态插入的HTML进行指令解析与绑定，所以直接加在锚标签上的自定义指令不会被触发。而包裹的div是写在Angular模板里的，属于编译时处理的节点，指令自然能正常工作。

解决这个问题可以试试这几种方法：

• 手动编译动态HTML：借助Angular的Compiler和ViewContainerRef，把DomPurify处理后的HTML手动编译成Angular可识别的视图/组件，这样里面的指令就能被解析执行。注意这种方式要把控好性能和安全风险。
• 调整指令选择器与手动触发：如果你的指令是元素选择器，改成属性选择器（比如selector: '[myDirective]'），确保DomPurify清理时保留该属性。之后在HTML插入完成后，用Renderer2获取所有带该属性的锚标签，手动实例化指令并绑定逻辑。
• 事件委托替代指令绑定：如果指令主要处理锚标签的事件（比如点击），可以在父容器上用事件委托监听。不管锚标签是静态还是动态生成的，事件都会被父容器捕获，再执行对应的逻辑。

举个事件委托的简单示例：

// 父组件中实现事件委托
@HostListener('click', ['$event'])
handleAnchorClick(event: MouseEvent) {
  const target = event.target as HTMLElement;
  if (target.tagName === 'A' && target.hasAttribute('my-directive')) {
    // 这里执行指令原本的业务逻辑
    console.log('锚标签被点击');
    // 比如阻止默认跳转等
    event.preventDefault();
  }
}

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