Angular innerHtml 绑定中的驼峰式到小写 html 属性转换

Question

在我的组件中，我有一个模板文字字符串，其中包含一个带有驼峰式属性的 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>

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

Answer 1

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

此外，您作为副作用提出的观点很有趣，可能需要一些解释：您将 innerHtml 与 Angular 组件一起使用（mat-icon，它不是一个标准的 HTML 标签）。

所以，无论如何，它都会失败：网络浏览器不知道如何呈现 mat-icon。

要渲染 mat-icon，它必须通过 Angular 模板引擎：Angular 将看到 mat-icon，并将拉取组件 definition/template，并以浏览器可以理解的 HTML 术语 (DOM) 呈现它。

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

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

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

camelCase to lowercase html attribute conversion in Angular innerHtml binding