Angular 4中如何显示内容的CSS样式示例代码

前言

在开始本文的正文之前，我们先来看一下angular2中将带标签的文本输出在页面上的相关内容，为了系统性的防范XSS问题，Angular默认把所有值都当做不可信任的。 当值从模板中以属性（Property）、DOM元素属性（Attribte)、CSS类绑定或插值表达式等途径插入到DOM中的时候， Angular将对这些值进行无害化处理（Sanitize），对不可信的值进行编码。

h3>Binding innerHTML</h3>

<p>Bound value:</p>

<p
class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>

<p>Result of binding to innerHTML:</p>

<p
class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>
[innerHTML]="htmlSnippet"

这个属性可以识别 HTML标签 但不识别标签中的属性值

发现问题

大家都知道Angular 中有 innerHTML 属性来设置要显示的内容，但是如果内容包含 CSS 样式，无法显示样式的效果。

比如：

public content: string = "<div style='font-size:30px'>Hello Angular</div>";

<p [innerHTML]="content"></p>

只会显示 Hello World ,字体不会是 30px，也就是 CSS 样式没有效果。

解决方案

自定义一个 Pipe 来对内容做转换。看下面代码。

写一个 HtmlPipe 类

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";

@Pipe({
 name: "html"
})

export class HtmlPipe implements PipeTransform{

 constructor (private sanitizer: DomSanitizer) {

 }

 transform(style) {
 return this.sanitizer.bypassSecurityTrustHtml(style);
 }
}

在需要的模块里面引入管道 HtmlPipe

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

在 innerHtml 中增加管道名字

<p [innerHTML]="content | html"></p>

这样就可以显示 content 的 CSS 样式。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • Angular4学习笔记之新建项目的方法

    Angular4我自己还在摸索学习中,这个系列中的笔记会不定期修改和更新-- 一.安装nodejs(下面方式 二选一,个人推荐第二种) 1.nodejs官网下载安装 2.使用nvm安装管理(具体方式参照我的另一篇) 二.全局安装angular-cli npm install -g @angular/cli 三.进入一个存放项目的文件夹,运行以下代码,初始化项目 ng new <项目名> 四.启动项目 cd <项目名> npm install ng serve 附: 1.引入jQue

  • Angular4 中内置指令的基本用法

    前言 大家都知道ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化. 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简单的描述,让你在更快更准确地学会每一种内置指令的基本用法. ngFor 作用:像 for 循环一样,可以重复的从数组中取值并显示出来. 例子: // .ts this.userInfo = ['张三', '李四', '王五']; // .html <div class

  • Angular2平滑升级到Angular4的步骤详解

    前言 Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. Angular4现已发布  http://www.jb51.net/article/109685.htm 为什么跳过Angular 3? 根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch

  • Angular4 中常用的指令入门总结

    前言 本文主要给大家介绍了关于Angular4 常用指令的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: NgIf <div *ngIf="false"></div> <!-- never displayed --> <div *ngIf="a > b"></div> <!-- displayed if a is more than b --> <div *ngIf=&

  • angular学习之从零搭建一个angular4.0项目

    angular学习之从零搭建一个angular4.0项目

    话说现在angular更新迭代太快了,从前几年用angular版本去搭建项目时还是1.x版本,到现在都已经是angular4.0了(直接跳过了3.0),由于公司要求用到angular4.0,所以就不能只是了解一下了,谁让我那么热爱学习了(咳咳!此处有一个推眼镜的动作),废话不多说,直接上手,首先用到的工具会有angular4.0.angular-cli.npm(v3.10.8).node(v6.2.0) 上述node和npm包管理器版本是我本机的版本号,这个版本不要太低应该都没问题 angula

  • Web前端框架Angular4.0.0 正式版发布

    前言 angular4.0.0正式版现在可以使用了.这是自我们宣布angular改版后,首次发布的专业版本.它向下兼容,支持所有使用了angular2.x.x版本的应用程序. 我们很高兴和大家分享这个版本,它包括最近的3个月中我们做的功能上的主要改进.我们努力让开发者们能够很容易的接受angular4.0.0. 新版本的特性 •更轻量化.更快 在这个新版本上,我们履行了我们的承诺,我们做到了让Angular的程序变的更轻量化,更快.但是我们还没有完全的优化完,在接下来的日子中,你会看到我们将着重

  • Angular 4中如何显示内容的CSS样式示例代码

    前言 在开始本文的正文之前,我们先来看一下angular2中将带标签的文本输出在页面上的相关内容,为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的. 当值从模板中以属性(Property).DOM元素属性(Attribte).CSS类绑定或插值表达式等途径插入到DOM中的时候, Angular将对这些值进行无害化处理(Sanitize),对不可信的值进行编码. h3>Binding innerHTML</h3> <p>Bound value:</p

  • shell脚本中echo显示内容带颜色的实现方法

    shell脚本中echo显示内容带颜色显示,echo显示带颜色,需要使用参数-e 格式如下: 复制代码 代码如下: echo -e "\033[字背景颜色:文字颜色m字符串\033[0m" 例如: 复制代码 代码如下: echo -e "\033[41;36m something here \033[0m" 其中41的位置代表底色, 36的位置是代表字的颜色 注: 1.字背景颜色和文字颜色之间是英文的"" 2.文字颜色后面有个m 3.字符串前后可

  • js控制不同的时间段显示不同的css样式的实例代码

    js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 复制代码 代码如下: function getCSS(){        datetoday = new Date();        timenow=datetoday.getTime();        datetoday.setTime(timenow);        thehour = datetoday.getHours();        if (thehour<12)            disp

  • 在Vue中使用CSS3实现内容无缝滚动的示例代码

    在Vue中使用CSS3实现内容无缝滚动的示例代码

    一.效果预览 最近在做一个活动页面,遇到幸运用户中奖的滚动公告需求.下面是实现效果: (gif录制略显卡顿,实际效果很流畅) 二.无缝滚动原理 1.容器宽高固定,超出内容隐藏: 2.内容准备2份,现参与滚动的内容有A.B两份,向左滚动: 3.滑动过程中,B份紧随A份之后,营造出无缝滚动回来的效果: 4.在A部分内容完全滚出容器的一瞬间,立刻将AB内容位置复原,由于A.B内容一模一样,这个复原过程很难看出来: 5.循环第3步: 三.代码 1.html部分 <template> <div c

  • JavaScript中layim之整合右键菜单的示例代码

    JavaScript中layim之整合右键菜单的示例代码

    一. 效果演示 1.1.好友右键菜单: 1.2.分组右键菜单: 1.3.群组右键菜单: 二. 实现教程 接下来我们以好友右键菜单为例,实现步骤如下: 2.1.绑定好友右击事件: /* 绑定好友右击事件 */ $('body').on('mousedown', '.layim-list-friend li ul li', function(e){ // 过滤非右击事件 if(3 != e.which) { return; } // 不再派发事件 e.stopPropagation(); var o

  • jstree中的checkbox默认选中和隐藏示例代码

    jstree复选框自定义显示隐藏和初始化默认选中 首先需要配置 Checkbox plugin "plugins" : ['checkbox'] 设置默认选中状态(checkbox 选中) state: {checked: true} $.jstree.defaults.checkbox.tie_selection 示例: $('#demo_tree').jstree({ "core" : { 'data': [ { "id" : "a

  • PyQt5中QTableWidget如何弹出菜单的示例代码

    QTableWidget是Qt程序中常用的显示数据表格的控件,类似于c#中的DataGrid.QTableWidget是QTableView的子类,它使用标准的数据模型,并且其单元数据是通过QTableWidgetItem对象来实现的,使用QTableWidget时就需要QTableWidgetItem.用来表示表格中的一个单元格,整个表格就是用各个单元格构建起来的 在PyQt5中,常需要对表格进行右击后弹出菜单,要实现这个操作就是两个问题:1. 如何弹出菜单.2. 如何在满足条件的情况下弹出菜

  • .NET Core中创建和使用NuGet包的示例代码

    在.NET Core的项目中,如果我们要在项目中引用其它DLL文件,不建议直接在项目引用中添加DLL文件(虽然在.NET Core项目中也可以这么做),建议是去直接下载DLL文件所属的NuGet包.这样最大的好处是我们可以将要引用DLL文件的所有依赖文件也一起引入到项目中,这样保证了引用文件的完整性,让其可以正确地运行. 下面我们通过一个.NET Core类库项目和一个ASP.NET Core项目,来演示怎么发布一个NuGet包,并在项目中引用该NuGet包. 首先我们新建一个.NET Core

  • SpringBoot中整合Shiro实现权限管理的示例代码

    之前在 SSM 项目中使用过 shiro,发现 shiro 的权限管理做的真不错,但是在 SSM 项目中的配置太繁杂了,于是这次在 SpringBoot 中使用了 shiro,下面一起看看吧 一.简介 Apache Shiro是一个强大且易用的Java安全框架,执行身份验证.授权.密码和会话管理.使用Shiro的易于理解的API,您可以快速.轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序. 三个核心组件: 1.Subject 即"当前操作用户".但是,在 Shi

  • 微信小游戏中three.js离屏画布的示例代码

    国庆8天长假,重庆之行因故未成,偶得闲,用three.js结合cannon.js写个3D小游戏耍耍. 在微信小游戏中,把three.js的3D内容在离屏画布处理,然后复制到在屏画布,方法是: let c_toolbarHeight=140; let sysInfo=wx.getSystemInfoSync(); require('./js/libs/weapp-adapter.js'); var canvas_webGL=window.canvas; canvas_webGL.width = s

随机推荐