在 Angular 中使用 Renderer2 渲染 SVG

问题描述

如何在 Angular 中使用 Renderer2 渲染 SVG（我已在本地存储在我的项目中）？

我尝试这样做：

const div = this.renderer.createElement('div');
const svg = this.renderer.createText('<svg>{....}</svg>');
this.renderer.appendChild(div,svg);

但它实际上将渲染器作为文本。

有人可以帮忙吗？

解决方法

createText 方法用于创建 text node，在这种情况下，您可以直接设置 innerHTML。

const div = this.renderer.createElement('div');
div.innerHTML = svgStr;

,

请记住，您可以使用一个简单的变量和路径中的 order = order.orderProduct.quantity - orderView.fault 创建一个带有选定路径的 svg，例如

[attr.d]="variable

在 .ts 中：

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" 
      fill="currentColor" viewBox="0 0 16 16">
  <path [attr.d]="path"/>
</svg>