在Ionic/Angular组件中使用vega-embed遇DOM元素不存在问题

核心问题原因 #

Angular默认启用视图封装（ViewEncapsulation.Emulated），会给组件内的DOM元素自动添加唯一属性前缀，导致你通过全局ID选择器figure#vis无法匹配到组件内的元素。自动生成的组件能正常工作是偶然情况，自定义组件必须遵循Angular的DOM操作规范。

解决方案：使用Angular的ViewChild获取元素引用 #

替换全局ID选择器为Angular提供的@ViewChild装饰器，直接获取组件内的DOM节点引用：

1. 修改组件类代码：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import embed from 'vega-embed';

@Component({
  selector: 'app-histogram',
  templateUrl: './histogram.component.html',
  styleUrls: ['./histogram.component.scss']
})
export class HistogramComponent implements AfterViewInit {
  // 通过模板变量引用元素
  @ViewChild('vis') visElement!: ElementRef<HTMLElement>;

  async ngAfterViewInit() {
    const spec = "https://raw.githubusercontent.com/vega/vega/master/docs/examples/bar-chart.vg.json";
    // 直接传入组件内的DOM节点
    const result = await embed(this.visElement.nativeElement, spec);
    console.log(result.view);
  }
}

2. 更新HTML模板（用模板变量#vis替代ID）：

<div>
  <figure #vis></figure>
</div>

额外排查点 #

如果上述方案无效，检查以下内容：

• 确认HistogramComponent已在对应模块的declarations数组中注册
• 若使用懒加载模块，确保组件所在模块被正确导入
• 避免手动修改组件的ViewEncapsulation设置（除非确有必要）

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