时间戳

首页 > 解决方案 > 样式不适用于离子“Angular”中的innerHTML

innerhtml - 样式不适用于离子“Angular”中的innerHTML

问题描述

当我尝试将 html 作为 innerHtml 传递给我的视图样式组件时不起作用

<div [innerHTML]="Html Code"></div>

标签： innerhtml

解决方案

为了解决这些问题，使用 DomSanitizer 能够渲染 CSS 绕过。

  1. 生成管道：

    ionic g pipe safeHtml

  2. 通过以下方式修改文件管道内的所有代码：

    从“@angular/core”导入 { Pipe, PipeTransform }；从“@angular/platform-b​​rowser”导入 {DomSanitizer}；

    @Pipe({ name: 'safeHtml', }) 导出类 SafeHtmlPipe 实现 PipeTransform {

    构造函数（private sanitizer:DomSanitizer）{} transform(html) { return this.sanitizer.bypassSecurityTrustHtml(html); } }

  3. 将 crated 的管道添加到 app/app.module.ts ：

    @NgModule({ 声明：[ MyApp, ... SafeHtmlPipe, ],

  4. 在您使用 innerHTML 添加管道的 HTML 文件中的最后一点：

推荐阅读