如何通过Angular自定义指令为外链编程式添加SVG图标

现有代码问题排查 #

• SVG创建未指定命名空间：Angular的Renderer2.createElement默认创建HTML命名空间元素，SVG属于独立的SVG命名空间，直接创建的节点无法正常渲染
• 元素插入位置错误：当前逻辑把图标插到了<a>标签的父节点下，没有放到链接内容的末尾
• 动态组件逻辑不完整：仅解析组件工厂没有完成实例创建、输入参数绑定、节点插入的完整流程
• SVG内容赋值方式错误：不能通过setAttribute设置innerHTML，这是DOM实例属性不是HTML标签属性

方案1：直接插入原生SVG（无依赖，最轻量） #

不需要依赖团队组件库，直接创建符合命名空间规范的SVG节点插入到链接末尾即可，完整可运行指令代码如下：

import { Directive, ElementRef, HostBinding, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: 'a[externalLink]',
})
export class ExternalLinkDirective implements OnInit {
  // 外链默认新标签打开
  @HostBinding('attr.target') readonly target = '_blank';
  // 补充安全属性防止钓鱼风险
  @HostBinding('attr.rel') readonly rel = 'noopener noreferrer';

  constructor(
    private el: ElementRef<HTMLAnchorElement>,
    private renderer: Renderer2
  ) {}

  ngOnInit(): void {
    // 创建SVG节点必须指定SVG命名空间
    const svg = this.renderer.createElement('svg', 'http://www.w3.org/2000/svg');
    // 设置SVG基础属性
    this.renderer.setAttribute(svg, 'width', '16');
    this.renderer.setAttribute(svg, 'height', '16');
    this.renderer.setAttribute(svg, 'viewBox', '0 0 24 24');
    this.renderer.setAttribute(svg, 'fill', 'none');
    // 调整图标和文字的对齐、间距
    this.renderer.setStyle(svg, 'margin-left', '4px');
    this.renderer.setStyle(svg, 'vertical-align', 'middle');

    // 创建第一个路径节点
    const path1 = this.renderer.createElement('path', 'http://www.w3.org/2000/svg');
    this.renderer.setAttribute(path1, 'd', 'M18.75 11.8869V18.75H5.25V5.25H12.1131L9.86306 3H3.75C3.33577 3 3 3.33581 3 3.75V20.25C3 20.6642 3.33577 21 3.75 21H20.25C20.6642 21 21 20.6642 21 20.25V14.1369L18.75 11.8869V11.8869Z');
    this.renderer.setAttribute(path1, 'fill', '#3ad4dd');
    
    // 创建第二个路径节点
    const path2 = this.renderer.createElement('path', 'http://www.w3.org/2000/svg');
    this.renderer.setAttribute(path2, 'd', 'M13.0449 3L15.9617 5.9168L9.87854 12L11.9999 14.1213L18.0831 8.03812L20.9999 10.955V3H13.0449Z');
    this.renderer.setAttribute(path2, 'fill', '#3ad4dd');

    // 拼接SVG完整结构
    this.renderer.appendChild(svg, path1);
    this.renderer.appendChild(svg, path2);
    // 将SVG插入到a标签的最后位置
    this.renderer.appendChild(this.el.nativeElement, svg);
  }
}

注意：创建SVG和其内部所有子元素时，createElement第二个参数必须传入SVG命名空间，否则节点会被识别为未知HTML元素，无法正常渲染图形。

方案2：动态插入团队CustomIcon组件（复用组件库能力） #

如果需要统一使用团队组件库的图标样式、能力，通过ComponentFactoryResolver完成动态组件创建即可，Angular 12版本下该API完全稳定可用（14+版本才标记为废弃），代码如下：

import { ComponentFactoryResolver, Directive, ElementRef, HostBinding, OnInit, Renderer2, ViewContainerRef } from '@angular/core';
import { CustomIcon } from '@company/components-lib/custom-icon';

@Directive({
  selector: 'a[externalLink]',
})
export class ExternalLinkDirective implements OnInit {
  @HostBinding('attr.target') readonly target = '_blank';
  @HostBinding('attr.rel') readonly rel = 'noopener noreferrer';

  constructor(
    private el: ElementRef<HTMLAnchorElement>,
    private renderer: Renderer2,
    private viewContainer: ViewContainerRef,
    private cfr: ComponentFactoryResolver
  ) {}

  ngOnInit(): void {
    // 解析CustomIcon组件工厂
    const iconFactory = this.cfr.resolveComponentFactory(CustomIcon);
    // 创建组件实例
    const iconRef = this.viewContainer.createComponent(iconFactory);
    // 绑定组件输入参数（和MatIcon用法一致，假设输入属性为name，可根据组件实际API调整）
    iconRef.instance.name = 'external-link';
    // 调整图标基础样式
    const iconEl = iconRef.location.nativeElement;
    this.renderer.setStyle(iconEl, 'margin-left', '4px');
    this.renderer.setStyle(iconEl, 'vertical-align', 'middle');
    // 将图标节点插入到a标签末尾
    this.renderer.appendChild(this.el.nativeElement, iconEl);
  }
}

可选扩展 #

如果需要自动识别外链、无需手动给标签加指令，可以在指令初始化时拿到href属性值，判断是否为当前域名下的内部链接，仅当链接为外部地址时才追加图标、添加新标签打开属性，内部链接直接跳过处理即可。

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