时间戳

首页 > 解决方案 > SVG.js - 如何在 Angular 中访问 shadow-root（打开）中的元素

javascript - SVG.js - 如何在 Angular 中访问 shadow-root（打开）中的元素

问题描述

我目前正在从事Angular Elements项目。在这个自定义组件中，我想使用SVG.js 3+。但是由于我需要ViewEncapsulation.ShadowDom在我的组件中使用，我在初始化 SVG.js 时遇到了一些问题。

创建 SVG 和绘制矩形的标准过程如下：

this.draw = SVG().addTo("#SVGContainer").viewbox(0, 0, 300, 140);
this.draw.rect(100, 100).move(100, 50).fill('#f06')

这里的问题是.addTo("#SVGContainer")只能找到不在 shadow-root 中的元素。我已经用我的使用 shadow-root 的组件和不使用 shadow-root 的容器对其进行了测试。正如预期的那样，SVG.js 在没有 Shadow Dom 的 Angular 项目中工作，但在使用 shadow-root 的项目中没有工作。

我知道container.shadowRoot.querySelector(".test").innerHTML你可以访问影子元素，但该函数.addTo()只允许我传递我的元素的 id，所以没有传递 dom 元素本身的选项。

由于ViewEncapsulation.ShadowDom这是我的新自定义 Web 组件的要求，我想知道是否可以将 shadow-dom 元素传递给 SVG.js，或者根本不可能。

标签： javascriptangulartypescriptshadow-domsvg.js

解决方案

解决了这个问题。就在我按照在他们的 Github 上创建问题的建议时，我遇到了这个Github 问题，其中用户说他们甚至支持 shadow dom 很好，你可以直接传递元素很好，但他们应该记录它。

他说你可以直接传递元素。所以我不得不再试一次，而且很好。有效。我为我的容器创建了一个 ViewChild 参考，如下所示：

 @ViewChild('svgContainer') svgContainer: any;

并将其传递给.addTo()这样的：

this.draw = SVG().addTo(this.svgContainer.nativeElement).viewbox(0, 0, 300, 140);

所以有两件事为什么它第一次不起作用。首先，我没有找到他们说您可以传递元素本身的文档（如果有的话）。而且当我第一次尝试时，我忘了添加.nativeElement.

推荐阅读