Angular 12 不渲染 svg 组件

Question

我正在开发一个 angular 组件。它是一个与 svg 一起使用的头像创建器。我的问题是，当我 运行 我的组件在 angular 项目中时，它只绘制一个圆圈而不是其他组件，如鼻子、头发、脸等，但是当我检查我的组件并复制它的 svg 元素并粘贴时在 svg 查看器中，它显示应该如何。

我在本地的组件

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

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

另外，这里是项目的repo

Angular 项目版本

感谢任何帮助

Answer 1

可能是由于 angular 的更改检测。 你试过了吗https://angular.io/api/core/ChangeDetectorRef 更改其他组件后检测更改？

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

Answer 2

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