Angular14+TypeScript实现单选按钮触发地图悬停效果问题

当前项目基于Angular 14 + TypeScript 4.7.2开发，需要实现两种区域选择的交互联动：

• 用户可直接点击SVG地图选择特定区域
• 用户可点击对应单选按钮选择匹配区域
  交互要求：用户通过单选按钮选择区域时，地图对应区域需要同步触发和鼠标悬停一致的高亮效果。
  最初仅考虑到用jQuery实现该效果，代码片段如下：

onChange(){
  this.activateOnHover(this.currentRegion.ID);
}
activateOnHover(selector: string): void {
  $("#"+selector).mouseover();
}

对应HTML中绑定的地图点击事件片段：

(click)="onClick($event)"

受项目保密规定限制，无法提供完整代码。

需要高亮的目标SVG元素属性如下：

id="Noord-Nederland" (click)="onClick($event)"

尝试使用@ViewChild + Renderer2的方案实现，代码如下：

@ViewChild('#Noord-Nederland') input: ElementRef<HTMLInputElement>;

onChange(){
  this.activateHoverEffect(this.currentRegion.ID);
}
activateHoverEffect(selector: string): void {
  console.log(" 1")
  console.log(this.input);
  // Access the input object or DOM node
  console.log("2 ")
  console.dir(this.input.nativeElement);
  console.log("3")

  // Manipulate via Renderer2
  this.renderer.setStyle(this.input.nativeElement, 'background', '#d515a0');
}

代码执行时，打印完日志1后，this.input输出为undefined。
补充说明：项目地图基于SVG实现，存在多个ID相同的元素，暂不确定这是否是元素获取失败的原因。

@ViewChild返回undefined有两个明确原因：

1. @ViewChild不支持直接传入CSS选择器字符串作为查询参数，Angular中@ViewChild仅支持查询模板引用变量、组件/指令类，传入'#Noord-Nederland'无法匹配到任何DOM元素。
2. 页面存在多个重复ID本身违反HTML规范，SVG场景下重复ID会导致所有ID选择器仅返回DOM树中第一个匹配节点，后续节点无法通过ID查询命中。

Angular项目完全不需要引入jQuery实现这类交互，以下是两种符合Angular设计范式的实现方案：

方案1：状态驱动样式（优先推荐） #

不要手动操作DOM触发mouseover事件，直接将高亮状态绑定到组件属性，靠类名控制高亮样式，稳定性和可维护性远高于手动触发事件：

1. 在组件中声明存储当前高亮区域ID的属性：

currentHighlightRegionId: string | null = null;

2. 给SVG区域元素动态绑定高亮类名，如果是*ngFor循环渲染的区域，直接绑定类判断逻辑即可：

<!-- 循环渲染所有地图区域 -->
<path 
  *ngFor="let region of regionList"
  [id]="region.ID"
  (click)="onClick($event, region)"
  [class.hover-highlight]="currentHighlightRegionId === region.ID"
></path>

3. 单选按钮切换、鼠标移入移出地图区域时，直接更新currentHighlightRegionId的值即可，不需要操作DOM：

onRegionRadioChange(regionId: string) {
  this.currentRegion = this.regionList.find(r => r.ID === regionId);
  this.currentHighlightRegionId = regionId;
}
// 鼠标移入地图区域时更新高亮ID
onMapRegionMouseEnter(regionId: string) {
  this.currentHighlightRegionId = regionId;
}
// 鼠标移出地图区域时，高亮回退到当前选中项，无选中项则清空高亮
onMapRegionMouseLeave() {
  this.currentHighlightRegionId = this.currentRegion?.ID || null;
}

4. 在样式文件中编写高亮样式，和原有hover样式保持完全一致：

/* 原有鼠标悬停样式 */
path:hover {
  fill: #d515a0;
}
/* 主动触发的高亮类 */
path.hover-highlight {
  fill: #d515a0;
}

该方案完全规避直接操作DOM的风险，也不会受重复ID问题影响。

方案2：复用现有hover逻辑的DOM操作方案 #

如果暂时不想重构现有样式逻辑，需要手动触发元素的mouseover事件，可通过@ViewChildren配合Renderer2实现，无需引入jQuery：

1. 移除重复ID，给所有SVG区域添加统一的模板引用变量#mapRegion，循环渲染场景下用@ViewChildren获取所有区域元素：

<path 
  *ngFor="let region of regionList"
  #mapRegion
  [id]="region.ID"
  (click)="onClick($event, region)"
></path>

2. 在组件中获取所有区域的元素引用：

@ViewChildren('mapRegion') mapRegionElements!: QueryList<ElementRef<SVGPathElement>>;

constructor(private renderer: Renderer2) {}

3. 单选切换时找到对应区域元素，触发mouseover事件复用原有逻辑：

activateHoverEffect(regionId: string): void {
  // 先清空所有区域的hover状态
  this.mapRegionElements.forEach(el => {
    el.nativeElement.dispatchEvent(new MouseEvent('mouseout'));
  });
  // 匹配目标区域
  const targetRegion = this.mapRegionElements.find(el => el.nativeElement.id === regionId);
  if (targetRegion) {
    // 触发mouseover事件，复用原有hover逻辑
    targetRegion.nativeElement.dispatchEvent(new MouseEvent('mouseover'));
  }
}

注意：必须先修复页面重复ID的问题，同一页面所有元素ID需要全局唯一，否则任何DOM查询方案都会出现匹配异常。如果是SVG<use>标签引用导致的ID重复，需要将引用ID修改为唯一值。

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