Angular SVG交互绑定事件报EventTarget无setAttribute属性及API无返回问题

问题1：TypeScript编译报错修复 #

报错原因 #

TypeScript默认给MouseEvent.target的类型是通用EventTarget，该类型没有定义setAttribute方法，直接调用就会触发类型校验报错，你直接声明为any虽然绕开了编译校验，但属于不安全的类型处理，也留下了后续类型报错的隐患。

修复代码 #

对事件目标做明确的类型断言，指定为SVG路径元素类型即可：

// map-image.component.ts 核心逻辑
ngAfterViewInit() {
  // 直接指定查询返回的元素类型为SVGPathElement
  const pieces = Array.from(document.querySelectorAll<SVGPathElement>("path"));

  pieces.forEach(pathEl => {
    pathEl.addEventListener("mouseenter", (e: MouseEvent) => {
      // 将事件目标断言为SVGPathElement，明确类型
      const target = e.target as SVGPathElement;
      target.setAttribute("fill", "red");
    });
  });
}

问题2：API无法拉取数据修复 #

失效原因 #

你在map-image组件的鼠标悬停逻辑中，仅实现了区块高亮的效果，没有触发@Output绑定的onSelection事件向外传递当前选中的国家信息，父组件的loadCountryData方法根本不会被触发，自然不会发起API请求拉取数据。

修复步骤 #

1. 提前给SVG中所有国家路径元素添加自定义属性，存储对应的国家编码和名称，示例：

<path 
  data-country-code="CN" 
  data-country-name="中国" 
  d="Mxxxxxxx" <!-- 原有路径参数 -->
/>

2. 补全map-image.component.ts的事件发射逻辑：

export class MapImageComponent implements AfterViewInit {
  // 定义事件传递的参数类型，替代any
  @Output() onSelection: EventEmitter<{name: string, countryCode: string}> = new EventEmitter();

  ngAfterViewInit() {
    const pieces = Array.from(document.querySelectorAll<SVGPathElement>("path"));

    pieces.forEach(pathEl => {
      pathEl.addEventListener("mouseenter", (e: MouseEvent) => {
        const target = e.target as SVGPathElement;
        target.setAttribute("fill", "red");
        // 从路径的自定义属性中读取国家信息，向外发射
        this.onSelection.emit({
          name: target.dataset.countryName || '',
          countryCode: target.dataset.countryCode || ''
        });
      });
      // 可选补充鼠标移出还原颜色的逻辑，优化交互体验
      pathEl.addEventListener("mouseleave", (e: MouseEvent) => {
        const target = e.target as SVGPathElement;
        target.setAttribute("fill", "#你原有SVG的默认填充色");
      });
    });
  }
}

可选优化建议 #

可以给API请求添加类型定义和异常捕获，避免接口报错时页面异常：

// map-service.ts 新增类型定义
interface CountryInfo {
  name: string;
  capitalCity: string;
  region: { value: string };
  incomeLevel: { value: string };
}

getCountry(countryCode: string) {
  // 指定接口返回值类型
  return this.http.get<[unknown, CountryInfo[]]>(`https://api.worldbank.org/v2/country/${countryCode}?format=json`);
}

// map.component.ts 新增异常处理
loadCountryData(e: {name: string, countryCode: string}) {
  this.country.name = e.name;
  this.mapService.getCountry(e.countryCode)
    .pipe(take(1))
    .subscribe({
      next: (res) => {
        const info = res[1][0];
        this.country.data = [
          `名称: ${info.name}`,
          `首都: ${info.capitalCity}`,
          `地区: ${info.region.value}`,
          `收入水平: ${info.incomeLevel.value}`
        ];
      },
      error: () => {
        this.country.data = ['数据加载失败，请稍后重试'];
      }
    })
}

注意：请确保SVG中存储的国家编码为世界银行API支持的二位ISO国家编码，否则会出现接口返回空数据的问题。

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