Angular innerHtml绑定中的camelCase到小写html属性转换

Question

在我的组件中，我有一个模板文本字符串，其中包含一个带有camelCase属性的HTML标记：

htmlString = `<mat-icon svgIcon="edit" ...></mat-icon>`;

这个字符串被组装为数组forEach循环中对象的属性。

由于模板中的几个原因，我需要在*ngFor循环中的innerHtml属性中输出：

<li *ngFor="let foo of foos" [innerHTML]="foo.htmlString"></li>

(这是我实现的简化代码示例。(

我发现在输出中，svgIcon属性以小写svgicon呈现，请参阅DOM检查器输出：

<li _ngcontent-qui-c96="">
<mat-icon svgicon="edit"></mat-icon>
</li>

Bug或功能？找不到有关此行为的任何信息。谢谢你的提示！

Answer 1

属性确实都被Angular转换为小写，不用担心。

此外，您提出的副作用是有趣的，可能需要一些解释：您将innerHtml与Angular组件一起使用(mat-icon，它不是标准的HTML标记(。

所以，无论如何，它都会失败：web浏览器不知道如何渲染mat-icon。

对于要渲染的mat-icon，它必须经过Angular模板引擎：Angular将看到mat-icon，并提取组件定义/模板，并以浏览器能够理解的HTML术语(DOM(进行渲染。

通常在您的情况下，您应该使用：

<li *ngFor="let foo of foos">
<mat-icon [svgIcon]="foo.icon" ...></mat-icon>
</li>

如果您的组件更复杂，您可以探索使用ng-content的内容投影。