Angular 12 不渲染 svg 组件答案

【问题标题】：Angular 12 doesn't render svg componentAngular 12 不渲染 svg 组件
【发布时间】：2021-09-11 19:57:06
【问题描述】：

我正在开发一个角度组件。它是一个使用 svg 的头像创建器。我的问题是，当我在 Angular 项目中运行我的组件时，它只绘制一个圆圈，而不是鼻子、头发、面部等其他组件，但是当我检查我的组件并复制其 svg 元素并粘贴到 svg 查看器中时，它显示为应该怎么样。

我的本地组件

如您所见，我的组件具有 svg 元素，但未在浏览器中呈现。但是，当我在查看器中使用相同的 svg 元素时，它们会被渲染。

在线 svg 查看器中我的组件的 svg 元素

另外，这里是项目的repo

Angular 项目版本

感谢任何帮助

【问题讨论】：

【解决方案1】：

可能是由于角度的变化检测。你有没有试过https://angular.io/api/core/ChangeDetectorRef 更改其他组件后检测更改？

 ngOnInit(): void {
     this.random();
     this.cd.detectChanges()
 }

【讨论】：

【解决方案2】：

问题是，当我使用选择器标签创建组件时，angular 会将自己的元素标签添加到 svg 架构中，这会破坏 svg 的架构并且浏览器不会呈现它。所以，我使用属性选择器来解决这个问题。这个SO 的回答帮助我解决了这个问题。

【讨论】：