angular2中将带标签的文本输出在页面上

最新推荐文章于 2024-02-19 03:15:00 发布
最新推荐文章于 2024-02-19 03:15:00 发布
阅读量5.5k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l775632765/article/details/54630681
版权

为了系统性的防范XSS问题，Angular默认把所有值都当做不可信任的。 当值从模板中以属性（Property）、DOM元素属性（Attribte)、CSS类绑定或插值表达式等途径插入到DOM中的时候， Angular将对这些值进行无害化处理（Sanitize），对不可信的值进行编码。

  1. h3>Binding innerHTML</h3>
  2. <p>Bound value:</p>
  3. <p class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
  4. <p>Result of binding to innerHTML:</p>
  5. <p class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>
[ innerHTML ] = "htmlSnippet" 这个属性可以识别 HTML标签 但不识别标签中的属性值

刘_小飞
关注
2023年前端面试汇总-React
越陌度阡
06-29 928
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
Web-拾贝
热门推荐
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
Angular 展示标签内容，而不是标签本身
u012007592的博客
04-08 1256
在angualr项目的html页面中，如果展示的数据包含html标签，则不会被解析，而是原样展示标签，比如<br>，而不会产生换行的效果，解决办法是，在需要展示绑定数据的外层容器设置绑定属性，如：<div [innerHTML]="属性"></div> ...
angular里面使用带标签的文本
feizhong_web的博客
07-31 1942
angular里面使用带标签的文本angular中的html为了保护外部插入内容改变文本，自带过滤器，把标签内容自带转义，所以你在数据库拿出来的带标签文本会被转义成特殊字符。其实很简单，直接上代码。 在js里面：//定义一个通用过滤器对文本标签的内容过滤 app.filter(‘trustHtml’, function (sce) {      return function (input) {
angular2--前端页面兼容富文本html标签
Ariel的博客
12-27 1171
请求接口时返回一个content字段，里面包含html标签 如果我把content内容直接放到html页面，页面不能兼容： &amp;amp;amp;lt;p&amp;amp;amp;gt;{{Object.content}}&amp;amp;amp;lt;/p&amp;amp;amp;gt; //此处的Object为用户自己把以上数据存储到的一个对象，可自定义 解决办法： &amp;amp;amp;lt;p id=&amp;amp;quot;n
angular怎么显示html,angularJS 显示带html的文本
weixin_33670352的博客
06-18 927
1.首先定义一个angularJS的过滤器，作为处理html文本的通用过滤器。define([ "app",], function (app) {app().registerFilter("trusted", ["$sce", function ($sce) {return function (html) {if (typeof html== 'string') //判断类型为字符串retu...
angular将html代码输出为内容的实例
10-17
本文将详细介绍两种在Angular中将HTML代码输出为内容的方法。 首先，我们需要了解Angular的 `$sce` (Strict Contextual Escaping) 服务。这个服务用于管理信任度，确保在DOM中插入的内容是安全的。当尝试将HTML字符...
Angular 4中如何显示内容的CSS样式示例代码
01-21
在开始本文的正文之前，我们先来看一下angular2中将带标签的文本输出在页面上的相关内容，为了系统性的防范XSS问题，Angular默认把所有值都当做不可信任的。 当值从模板中以属性（Property）、DOM元素属性（Attribte...
Angular框架基础与组件化开发
Angular框架概述 #### 1.1 什么是Angular框架 Angular框架是一个用于构建Web应用的开源前端框架，由Google开发和维护。它采用TypeScript语言编写，提供了一整套构建Web应用所需的工具和组件。 #### 1.2 Angular...
如何在 Angular 中使用 innerHTML 属性绑定
最新发布
rubys007的博客
02-19 727
Angular 2+ 支持使用属性绑定来渲染 HTML。如果你使用插值，它会被视为字符串。本文将介绍如何使用以及一些注意事项。
Angular2 - [innerHTML] && pipe(把字符串里的 /n 替换成 ＜br/＞)
若末lan的博客
05-31 485
/** * Created by Echo_hx on 2021/05. * 把字符串里的 /n 替换成 <br/> */ import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'hDataBr'}) export class DataBrPipe implements PipeTransform { transform(value: any) { return value.repla...
angular2如何识别字符串中的html标签，并按照html来显示视图
涂涂
10-19 9453
这个源于一个需求：从后台拿到用户评论的内容，该内容是字符串的，但是里面包含了html代码。要求显示的时候按照html来显示，不是按照字符串来显示。并且要求任意的段文字添加样式； 思路：用属性绑定的方法来innerHTML；将从后台拿到的字符串放在一个变量里面，用属性绑定[innerHTML]="aa",aa为存储字符串的变量 任意字符串添加样式： 先把预先的样式写在css里面，在评论的时候带
【Angular2】通过Pipe使用InnerHTML
学习 - 总结 - 分享 - Francis
10-07 2715
背景数据库存的内容是有一段有格式的HTML文本，需要把这段文本显示在界面上 这时候，可以使用pipe和innerHTML实现这个功能代码pipe fileimport { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser';@Pipe({ name:
Angular2文档学习的知识点摘要——显示数据、用户输入、表单
梦空间
01-01 2212
目录目录 显示数据 使用插值表达式显示组件属性 用户输入 模板引用变量 按键事件过滤 表单 模板驱动的表单 案例angular-forms 模型类 herots 组件 hero-formcomponentts hero-formcomponenthtml 根模块 appmodulets 根组件 appcomponentts 引导根模块 maints 示例页面 indexhtml 定制CSS类提供无效
Angular2+ 获取、操作DOM元素
idomyway的博客
11-02 1万+
前言 &nbsp;&nbsp;&nbsp;&nbsp;angular中在’@angular/core’库中通过提供Renderer2和ElementRef中实现了有关于DOM的操作，但是，angular中不推荐直接操作dom元素，通过变量结合内置指令是当前操作DOM的最好实践 获取DOM元素 &nbsp;&nbsp;&nbsp;&nbsp;1、通过模板变量名获取单个DOM元素 &nbsp;&nbs...
Angular动态绑定HTML文本
FE小白的进化之路
07-27 1万+
AngularJS中输出变量使用{{}}花括号或者ng-bind命令，在进行数据绑定时默认是以文本的形式输出，如果变量中有HTML标签的话，默认是不转义的，直接以标签的形式显示，这样防止了XSS脚本注入攻击。XSS攻击指的是通过对网页注入可执行客户端代码且成功地被浏览器执行，来达到攻击的目的，形成了一次有效XSS攻击，一旦攻击成功，它可能会获取到用户的一些敏感信息、改变用户的体验、诱导用户等非法行
angular 2+ innerHTML属性中内联样式丢失
weixin_30600197的博客
08-02 463
通过属性绑定的innerHTML，把字符串里面的html解析 解析是没问题的，但一些内联样式会丢失掉 为了不丢掉样式，需要自定义一个管道来解决这个问题 html.pipe.ts import {Pipe, PipeTransform} from "@angular/core"; import {DomSanitizer} from "@angular/platform-browser...
AngularJS 2 中如何实现ng-bind-html
weixin_30859423的博客
12-14 158
问题: 在AngularJS 1.x 中可以使用ng-bind-html来插入一段html代码，相当于struts2 标签的escape属性。但是AngularJS 2中取消了ng-bind-html，当项目中确实有需要动态插入html代码的时候我们该怎么做呢？ 解决方法: 使用[innerHtml]代替ng-bind-html。 innerHtml属性,用于设置标签内的html，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值