Angular+SVG.js 无法将 svgCanvas 引用到组件中的 html 元素

Question

我的问题是这样的，我试图将 svg.js 库实现到 angular 组件中，我的想法是我可以将它注入到 div 里面组件，以便我可以轻松地操作它。

所以为了解释我在组件中的问题（是应用程序组件的子组件）我在组件的 html 部分有这个 div 元素，我的想法是注入里面有 svg 元素。

<div class="svgRenderer" #svgRenderer *ngIf="renderSvgElement" id="svgRenderer" name="svgRenderer"></div>

然后在 component.ts 我有一个从服务中的可观察对象订阅的方法，它只执行这个方法。

  createContainerSVG() {
    this.renderSvgElement = true;
    this.svgCanvas = svg.SVG().addTo('#svgRenderer').size(200, 100); //error is located in the addTo
    this.svgCanvas.rect(100, 100).move(100, 50).fill('#f06');
  }

所以问题是 addTo 应该接收一个 CSS 选择器，但即便如此，它只会向我抛出错误，例如“错误类型错误：无法读取 null 的属性（读取 'put'）” .

我尝试的是制作一个指向 id=svgRenderer 的 viewChild，然后使用“nativeElement”给我带来 div 的引用，导致“错误类型错误：无法读取未定义的属性（阅读 'nativeElement')".

现在有效但不是我想要的是将 svgCanvas 添加到正文中，我的想法是隐藏在组件中的某些东西后面创建的 svg，然后我将 svg 元素导出为 pdf，然后以编程方式删除 svg 组件。

我是否忘记了如何调用 angular 上的元素？我这样做的方式有问题吗？我不得不承认我是 Angular.

的新手

此外，我也接受与 angular 一起工作的替代方案作为答案，但不是 ngx-svg，我需要将最终的 svg 导出为 pdf，因此它必须被隐藏并通过打字稿创建，不像 ngx-svg 那样在 html 上。

Answer 1

最后我解决了我自己的问题，如果你在我的问题中看到我有这个值 this.renderSvgElement = true; 好吧，如果这个值是真的，它应该让面板出现，但它不是'即使它已被渲染，也不会被 viewChild 识别，所以我进行了检查，元素被 viewChild 识别，我能够使用 this.svgCanvas = svg.SVG().addTo(this.svgRenderer.nativeElement).size(200, 100); 将我的 svg canvas 附加到该元素。

Angular+SVG.js 无法将 svgCanvas 引用到组件中的 html 元素

Angular+SVG.js unable to reference svgCanvas to html element in component

angular

typescript

svg

svg.js