如何将SVG作为属性传入Angular组件并安全渲染动态内容

要实现动态传入SVG字符串并安全渲染，核心是利用Angular的DomSanitizer将SVG内容标记为可信，再通过[innerHTML]绑定到模板中。以下是具体实现步骤：

1. 导入依赖模块 #

在tile组件的TypeScript文件中，导入Angular核心装饰器和安全相关类：

import { Component, Input, OnChanges } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

2. 组件内处理SVG内容 #

通过构造函数注入DomSanitizer，并在输入属性变化时（用ngOnChanges，因为构造函数执行时@Input属性还未赋值）将原始SVG字符串转换为Angular信任的SafeHtml类型：

@Component({
  selector: 'tile',
  templateUrl: './tile.component.html'
})
export class TileComponent implements OnChanges {
  @Input() rawSvg: string;
  safeSvg: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnChanges() {
    // 每次rawSvg更新时重新处理
    if (this.rawSvg) {
      this.safeSvg = this.sanitizer.bypassSecurityTrustHtml(this.rawSvg);
    }
  }
}

3. 修改模板实现渲染 #

模板中不能用{{}}（仅渲染文本），需用[innerHTML]绑定处理后的safeSvg，同时建议给<svg>标签设置基础的宽高和viewBox确保显示正常：

<div>
  <svg width="34" height="34" viewBox="0 0 34 34">
    <ng-container [innerHTML]="safeSvg"></ng-container>
  </svg>
</div>

4. 使用组件（含JSON动态加载场景） #

直接传入SVG字符串 #

在父组件中直接给tile传递SVG属性：

<toolbox>
  <tile rawSvg='<rect width="20" height="20" y="7" x="7" stroke="#FFF" stroke-width="2" fill="none" />'></tile>
</toolbox>

从JSON文件动态加载 #

如果需要从JSON文件运行时加载SVG内容，可通过HttpClient读取JSON，再循环渲染tile：

1. 准备JSON文件（比如assets/toolbox-icons.json）：

{
  "tiles": [
    {"svg": "<rect width='20' height='20' y='7' x='7' stroke='#FFF' stroke-width='2' fill='none' />"},
    {"svg": "<circle cx='17' cy='17' r='10' stroke='#FFF' stroke-width='2' fill='none' />"}
  ]
}

2. 父组件（toolbox）中加载JSON：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'toolbox',
  templateUrl: './toolbox.component.html'
})
export class ToolboxComponent implements OnInit {
  tiles: Array<{svg: string}> = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get<{tiles: Array<{svg: string}>}>('/assets/toolbox-icons.json')
      .subscribe(data => {
        this.tiles = data.tiles;
      });
  }
}

3. 父组件模板循环渲染：

<div class="toolbox-grid">
  <tile *ngFor="let item of tiles" [rawSvg]="item.svg"></tile>
</div>

重要安全提示 #

• 仅对可信来源的SVG内容使用bypassSecurityTrustHtml，切勿直接渲染用户上传或不可信的SVG，否则可能引发XSS安全风险。
• Angular的默认安全检查是为了防止恶意代码注入，绕过检查时必须确保内容绝对安全。

内容的提问来源于stack exchange，提问作者Charlie Benger-Stevenson