如何通过Angular ViewChildren访问SVG元素

ViewChild 或 ViewChildren

https://angular.io/api/core/ViewChild

支持的选择器包括:

• 任何带有@Component或@Directive装饰符的类
• 作为字符串的模板引用变量(例如查询with@ViewChild('cmp')`)
• 在当前组件的子组件树中定义的任何提供程序(例如@ViewChild(SomeService)SomeService:SomeService)
• 通过字符串标记定义的任何提供程序(例如@ViewChild('someToken')someTokenVal:any)
• TemplateRef(例如,使用@ViewChild(TemplateRef)模板进行查询;)

您可以从模板引用变量获取HtmleElement,并在加载对象元素资源后开始尝试操作它

online example

html

  <object #mySvg data="./assets/new.svg" type="image/svg+xml" id="map"></object> 

组成部分

  @ViewChild('mySvg') mySvg;

  ngOnInit() {
      const objElm = (this.mySvg.nativeElement as HTMLObjectElement);
    objElm.onload = () => {
        const paths = objElm.contentDocument.querySelectorAll('path');

        paths.forEach((path,index) => {
          console.log(`path:${index} , d=${path.getAttribute("d")}`);
        })

    }    
  }

做了更多的研究,找到了下面的解决方案。有趣的是,这段代码在我的角度分量的ngAfterViewInit方法中,它仍然 需要window.onload eventlistener才能工作。为什么?

window.addEventListener("load", function() {
    var svgObject = document.getElementById('map').contentDocument;
    var svg = svgObject.getElementById('svg48152');
    console.log(svg);
    const rects = svg.querySelectorAll('rect');
    console.log(rects);
    rects.forEach(r => {
        console.log(r);
    });
});

关键组件是 contentDocument onload eventlistener。一些有用的信息供将来参考: Using Javascript with SVG