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

Question

我正在尝试通过属性绑定(bind)(方括号语法)输出以下 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 输出，这似乎是正确的，但列表显示不正确。

看看我为这个问题创建的以下 stackblitz: https://stackblitz.com/edit/angular-material-sanitize

知道我做错了什么吗？

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

通过获取 html(或者在我的例子中是角度 Material 标记)，我们可以非常灵活地处理我们想要显示的内容。我们可以在一种情况下显示角度 Material 列表，在另一种情况下显示一些其他 Material 组件。这就是我们从该原型(prototype)应用程序的 API 获取 html 的原因。

关于 stackblitz

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

红色的是API提供的。它通过 bypassSecurityTrustHtml() 进行了清理，html 输出看起来正确(见红色矩形 2b)但它看起来不正确(见红色矩形 2c)

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

Answer 1

我找到了解决方案。

您必须检查您的第一个案例(未清理)并放入其中的相同类。

所以你的新 mat-list 不能是无类的，你必须在每个内部元素中都这样做，例如:

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