HTML 将 TypeScript 标签作为字符串读取

Question

我一直在寻找这个问题的答案，但人们总是问相反的问题（HTML --> JS）。

做了一些研究，我了解到，出于安全目的，在 HTML 上读取标签时，Angular 很难将标签作为实际标签读取。就我而言，我必须这样做，但我的
标签被读取为文本。目前，我的 html 代码如下所示：

<table mat-table [dataSource]="scannerList" class="mat-elevation-z8 tabElement">
    <ng-container matColumnDef="scanners">
        <th mat-header-cell *matHeaderCellDef>Scanners</th>
        <td mat-cell *matCellDef="let element">
            <span class="floatLeft">{{element.innerHTML}}</span>
            <button mat-icon-button title="Delete" (click)="editCali(element)" class="btn">
                <mat-icon color="primary">edit</mat-icon>
            </button>
            <button mat-icon-button title="Delete" (click)="deleteCali(element)" class="btn">
                <mat-icon color="primary">delete</mat-icon>
            </button>
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns;"
    ></tr>
</table>

您不需要代码中的大部分内容，主要关注的是 <span class="floatLeft">{{element.innerHTML}}</span> 如何无法正常工作。

element 是一个 HTMLElement，所以当我使用 element.innerHTML 时，输出是：

产品名称
5000$
产品说明

但我想要的是：

产品名称
5000$
产品说明

Answer 1

插入的内容总是被转义，也就是说，HTML 不被解释，浏览器在元素的文本内容中显示尖括号。

对于要解释的 HTML，将其绑定到 HTML 属性，例如 innerHTML。如下所示，

<span class="floatLeft" [innerHTML] = "element"></span>

但是将攻击者可能控制的值绑定到 innerHTML 通常会导致 XSS 漏洞。

在此处阅读有关Sanitization in Angular 的更多信息。