Angular中如何为SVG字符串的onerror函数传递图片参数？

问题背景 #

需求：为err函数添加当前图片元素作为参数，现有代码如下：

原有JS代码 #

function err(){
   alert("test")
}

OrgChart.templates["ula"].img_0 = 
'<clipPath id="{randId}">
    <circle cx="50" cy="60" r="40"></circle>
</clipPath>
<image onerror="' + err() + '" preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80" ></image>';

原生JS可行写法示例 #

OrgChart.templates.ula.img_0 = 
'<clipPath id="{randId}">
    <circle cx="50" cy="60" r="40"></circle>
</clipPath><image onerror="err(this)" preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80" ></image>';

问题：在Angular的TS文件中，如何实现为上述SVG字符串中的onerror函数传递图片参数？

解决方案 #

在Angular TS中实现这个需求需要解决两个核心问题：确保err函数能被SVG的onerror事件访问到，以及正确拼接模板字符串传递当前图片元素this。

方案1：全局挂载函数（推荐） #

因为SVG的onerror事件运行在全局上下文，组件类中的方法默认无法直接被访问，所以需要将err方法挂载到window对象上：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit, OnDestroy {

  ngOnInit(): void {
    // 将err方法挂载到全局window对象，确保SVG能访问到
    (window as any).err = (imgElement: HTMLImageElement) => {
      alert(`图片加载失败，可对元素进行后续处理`);
      // 示例：替换为默认图片
      imgElement.setAttribute('xlink:href', 'assets/default-avatar.png');
    };
  }

  ngOnDestroy(): void {
    // 组件销毁时清理全局变量，避免内存泄漏和全局污染
    delete (window as any).err;
  }

  // 初始化OrgChart模板
  initOrgChartTemplate(): void {
    OrgChart.templates["ula"].img_0 = `
<clipPath id="{randId}">
    <circle cx="50" cy="60" r="40"></circle>
</clipPath>
<image onerror="err(this)" preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80" ></image>
    `;
  }
}

方案2：使用DomSanitizer处理内联函数（备选） #

如果不想暴露全局方法，可以将函数序列化为字符串拼入SVG模板，同时使用Angular的DomSanitizer绕过安全检查：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  svgTemplate: SafeHtml;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    // 定义处理函数
    const errorHandler = (imgElement: HTMLImageElement) => {
      alert('图片加载失败');
      imgElement.setAttribute('xlink:href', 'assets/default-avatar.png');
    };

    // 拼接SVG字符串并序列化函数
    const svgStr = `
<clipPath id="{randId}">
    <circle cx="50" cy="60" r="40"></circle>
</clipPath>
<image onerror="${errorHandler.toString()}(this)" preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="10" y="20" width="80" height="80" ></image>
    `;

    // 绕过安全检查，确保Angular允许加载该HTML内容
    this.svgTemplate = this.sanitizer.bypassSecurityTrustHtml(svgStr);
    // 赋值给OrgChart模板
    OrgChart.templates["ula"].img_0 = svgStr;
  }
}

关键说明 #

• 方案1是最稳定的实现方式，避免了函数序列化可能带来的上下文丢失问题，同时通过组件销毁时清理全局变量，避免内存泄漏。
• 方案2需要注意函数序列化后的上下文问题，且必须使用DomSanitizer处理，否则Angular的安全策略会阻止该SVG内容的渲染。

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