如何在SVG容器中嵌套Angular组件？（棋盘开发需求）

问题描述 #

尝试在SVG容器中嵌套Angular组件<app-square>时，该标签被标红且无法正常工作；但将容器换成<div>等HTML元素则能正常运行。由于要制作8x8棋盘，子组件仅包含SVG的<rect>元素，需要所有方块在同一个SVG容器内通过x/y坐标精确定位，因此必须使用SVG容器。

相关代码 #

父组件初始代码：

<svg *ngFor="let row of boardArray">
    <app-square *ngFor="let sqare of row" [reciever] = "sqare"></app-square>
</svg>

简化测试代码（仍存在标红问题）：

<svg>
    <app-square ></app-square>
</svg>

子组件SquareComponent模板代码：

<svg>
    <rect [attr.x] = "reciever.x" [attr.y] = "reciever.y" width="100" height="100" fill = "brown"></rect>
</svg>

解决步骤 #

1. 修改子组件模板，移除自带的<svg>标签

SVG容器内只能包含SVG原生元素，子组件无需自行包裹<svg>，直接输出<rect>即可：

<rect [attr.x]="reciever.x" [attr.y]="reciever.y" width="100" height="100" fill="brown"></rect>

2. 父组件使用单个SVG容器，通过<ng-container>实现嵌套循环

Angular不支持在同一元素上使用两个*ngFor，用<ng-container>承载外层循环（它不会生成真实DOM元素），将所有<app-square>放在同一个SVG容器内：

<svg width="800" height="800"> <!-- 适配8个100x100的方块 -->
    <ng-container *ngFor="let row of boardArray">
        <app-square *ngFor="let square of row" [reciever]="square"></app-square>
    </ng-container>
</svg>

3. 原理说明

SVG属于严格的XML命名空间，仅支持原生SVG元素（如rect、circle）或带有正确命名空间的元素。自定义Angular组件标签属于HTML命名空间，直接放在SVG内会被视为无效元素，导致编辑器标红、浏览器无法解析。通过让子组件直接输出SVG原生元素，就能在父组件的SVG容器中正常渲染和定位。

内容的提问来源于stack exchange，提问作者heshi