使用Angular2及更高版本清理Angular-material html标记

Question

我正在尝试通过属性绑定（方括号语法）输出以下html标记。

<mat-list>
    <mat-list-item class="mat-list-item-word-wrap">
        <mat-icon mat-list-icon>check</mat-icon>
        <h4 mat-line>List title 1</h4>
        <p mat-line>Content of list item 1.</p>
    </mat-list-item>
    <mat-list-item class="mat-list-item-word-wrap">
        <mat-icon mat-list-icon>check</mat-icon>
        <h4 mat-line>List title 2</h4>
        <p mat-line>Content of list item 2.</p>
    </mat-list-item>
    <mat-list-item class="mat-list-item-word-wrap">
        <mat-icon mat-list-icon>check</mat-icon>
        <h4 mat-line>List title 3</h4>
        <p mat-line>Content of list item 3.</p>
    </mat-list-item>
</mat-list>

有关上面的标记，请参见：https://material.angular.io/components/list/overview#lists-with-icons）

Angular html模板中的输出：

<div [innerHTML]="sanitizeServersideHtml(HtmlFromAbove)"></div>

即使我通过bypassSecurityTrustHtml（）方法处理html，列表也没有如期显示（https://angular.io/api/platform-browser/DomSanitizer#bypasssecuritytrusthtml ）。

让我感到困惑的是html输出，这似乎是正确的，但列表显示不正确。

看看我为此问题创建的以下堆叠闪电战： https://stackblitz.com/edit/angular-material-sanitize

知道我在做什么错吗？

-----更新1 -----

通过获取html（或在我的情况下为角材料标记），我们对于要显示的内容具有高度的灵活性。在一种情况下，我们可以显示有角度的材料清单，在另一种情况下，可以显示一些其他材料成分。这就是为什么我们从该原型应用程序的API获取html的原因。

关于stackblitz

绿色列表（绿色矩形编号1）是硬编码的，并且在浏览器中显示正确。

红色是由API提供的。通过passbySecurityTrustHtml（）对其进行了清理，并且html输出看起来正确（请参见红色矩形2b），但是它看起来不正确（请参见红色矩形2c）

那为什么html呈现正确但显示不正确？

Answer 1

我找到了解决方法。

您必须检查您的第一个病例（未消毒），然后放入其中的相同类。

因此，您的新mat-list不能是无类的，您必须在每个内部元素中做到这一点，例如：

<mat-list class="mat-list" role="list"> // and so on with other elements