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

【问题标题】：Sanitize Angular-Material html markup with Angular2 and beyond使用 Angular2 及更高版本清理 Angular-Material html 标记
【发布时间】：2019-01-05 20:51:04
【问题描述】：

我正在尝试通过 属性绑定（方括号语法）输出以下 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（或者在我的情况下为 angular material 标记），我们在想要显示的内容方面非常灵活。我们可以在一种情况下显示角度材料列表，在另一种情况下显示其他一些材料组件。这就是为什么我们从这个原型应用程序的 API 中获取 html。

关于stackblitz

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

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

那么为什么 html 渲染正确但看起来不正确？

【问题讨论】：

有了这个HTML标签块，为什么不把它放在一个单独的组件中，然后使用元素选择器调用它呢？
这个内容应该是动态的，它是由数据库通过 REST API 提供的。所以我认为单独的组件没有帮助，对吧？实际上，我认为问题出在 Angular Material 的材质标记上。看起来标记由 bypassSecurityTrustHtml() 函数正确处理。然而，浏览器无法正确呈现它。
您找到解决方案了吗？我有同样的情况。
不幸的是我没有，因此不得不使用没有材料组件的纯 html。似乎以这种方式使用材料组件是非常罕见的情况。

标签： angular-material angular5 angular6 sanitization html-sanitizing

【解决方案1】：

我找到了解决办法。

您必须检查您的第一个案例（未消毒）并放入其中的相同类。

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

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

【讨论】：