如何通过 Angular ViewChildren 访问 SVG 元素

Question

我有一个 svg 作为对象加载：

<object data="assets/img/states.svg" type="image/svg+xml" id="map"></object>

这个 svg 包含一个大的 png 地图和几个矩形和文本元素。

<rect
     y="224.72084"
     x="644.87109"
     height="231.68137"
     width="101.08391"
     id="RECT_TO_GET" />

我想获取rect数组中的所有元素，就像处理普通 html 元素一样，如下所示：

@ViewChildren('rect') rects !: QueryList<any>;
this.rects.forEach(r=> {
            console.log(r);
        });

问题是 rects 数组始终为空。我曾尝试让他们进来，ngViewAfterInit()但ngAfterViewChecked()没有成功。如何获取 svg 的元素？

我还没有尝试过getElementsById()，如果可能的话，我想以有角度的方式来做。

整个事情就是在我得到每个矩形元素后给出它们的上下文颜色。

Answer 1

ViewChild或者ViewChildren不支持 CSS 选择器

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

支持的选择器包括：

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

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

网上例子

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")}`);
        })

    }    
  }