在 Angular 中使用 Renderer2 渲染 SVG答案

【问题标题】：Rendering SVGs using Renderer2 in Angular在 Angular 中使用 Renderer2 渲染 SVG
【发布时间】：2021-04-25 06:53:39
【问题描述】：

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

我尝试这样做：

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

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

有人可以帮忙吗？

【问题讨论】：

标签： angular angular-renderer2

【解决方案1】：

createText方法用于创建text node，此时可以直接设置innerHTML。

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

【讨论】：

【解决方案2】：

请记住，您可以使用简单变量和路径中的[attr.d]="variable 来创建具有选定路径的 svg，例如

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

在 .ts 中：

path="M14 16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12zM5.904 5.197 10 9.293V6.525a.5.5 0 0 1 1 0V10.5a.5.5 0 0 1-.5.5H6.525a.5.5 0 0 1 0-1h2.768L5.197 5.904a.5.5 0 0 1 .707-.707z"

【讨论】：