import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer } from '@angular/platform-browser'; // https://angular.io/guide/security
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) { } transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}

在app.module.ts配置

import { NgModule } from '@angular/core'
import { SafeHtmlPipe } from '../safe-html.pipe'; import { AppComponent } from './app.component' @NgModule({
declarations: [AppComponent, SafeHtmlPipe],
imports: []
})
export class AppModule {}

在app.component.html

<div [innerHtml]="content | safeHtml"></div>

Angular4 innerHtml呈现富文本内容样式的更多相关文章

  1. PHP将富文本内容去除各类样式图片等只保留txt文本内容(作用于SEO的description)

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  2. wxParse解析富文本内容使点击图片可以选中并实现放大缩小

    wxParse解析富文本内容不多说,之前写过步骤介绍,主要是在使用过程中发现解析的富文本内容里有图片时有的可以点击放大缩小,有的点击却报错,找不到imgUrls. 经过排查发现:循环解析的富文本内容正 ...

  3. html处理富文本内容,避免XSS工具类

    import org.apache.commons.lang3.StringEscapeUtils;import org.jsoup.Jsoup;import org.jsoup.safety.Whi ...

  4. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  5. 解决HTML5(富文本内容)连续数字、字母不自动换行

    最近开发了一个与富文本相关的功能,大概描述一下:通过富文本编辑器添加的内容,通过input展示出来(这里用到了 Vue 的 v-html 指令). 也是巧合,编辑了一个只有数字组成的长文本,等到展示的 ...

  6. springmvc 后台实体类接受前端json字符串时,其中一个属性content 接受富文本内容时 标签<p>、<span> 这些标签丢失问题解决

    问题描述: 前端一个字段 <script id="editor" type="text/plain" name="content" s ...

  7. php将富文本内容图片上传到oss并替换

    /** * php 提取html中图片并替换 */ //要替换的内容 //提取图片路径的src的正则表达式 $match_str = '/(<img([^>]*)\s*src=(\'|\& ...

  8. PHP将富文本编辑后的内容,去除样式图片等只保留txt文本内容

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  9. Django之富文本(获取内容,设置内容)

    富文本 1.Rich Text Format(RTF) 微软开发的跨平台文档格式,大多数的文字处理软件都能读取和保存RTF文档,其实就是可以添加样式的文档,和HTML有很多相似的地方 图示 2.tin ...

随机推荐

  1. html 后手

    1.a (1.)超链接 <a href="new.html">点击进入到新网页</a>这里可以直接跳转到一个页面 <a href="http ...

  2. JS高阶---IIFE&&函数前加;

    IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的 JavaScript 函数. 全称为Immediately Invoked Function Expression 有时如果不加:会出现一 ...

  3. 201871010124-王生涛《面向对象程序设计(java)》第十五周学习总结

    项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...

  4. 莫烦TensorFlow_03 Variable加法

    import tensorflow as tf ## 定义变量 state = tf.Variable(0, name = 'counter') #print(state.name) one = tf ...

  5. Java高级-反射

    1.如何创建Class的实例 1.1过程:源文件经过编译(javac.exe)以后,得到一个或者多个.class文件..class文件经过运行(java.exe)这步,就需要进行类的加载(通过JVM的 ...

  6. 开源推荐 - CoDo开源一站式DevOps平台

    一群有梦想的年轻人开源了一个云管理平台,他们的口号是:让天下没有996的运维 有幸参与到CoDo项目的开发,这是一个非常棒的一站式开源运维平台,分享给大家 平台介绍 CODO是一款为用户提供企业多混合 ...

  7. [LeetCode] 25. Reverse Nodes in k-Group 每k个一组翻转链表

    Given a linked list, reverse the nodes of a linked list k at a time and return its modified list. k  ...

  8. 带有连接池的Http客户端工具类HttpClientUtil

    一.背景 业务开发中,经常会遇到通过http/https向下游服务发送请求.每次都要重复造轮子写HttpClient的逻辑,而且性能.功能参差不齐.这里分享一个高性能的.带连接池的通用Http客户端工 ...

  9. 关于Dev-C++用户所必须知道的知识

    开启这几个警告选项,才能拥有GCC编译器的较为全面的报错和警告 另外,目前Dev-C早已停止更新(停滞在版本号5.1,内置的GCC为4.9版本),且使用其检测数组变量也挺麻烦的,实在不推荐使用.

  10. Salesforce 开发新工具 - Visual Studio Code

    最近尝试使用Visual Studio Code来做Salesforce的开发工具,体验上比Sublime好用不少,介绍下详细步骤 第一步:下载对应版本的Visual Studio Code 下载地址 ...