Angular 4中如何显示内容的CSS样式示例代码
前言
在开始本文的正文之前,我们先来看一下angular2中将带标签的文本输出在页面上的相关内容,为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的。当值从模板中以属性(Property)、DOM元素属性(Attribte)、CSS类绑定或插值表达式等途径插入到DOM中的时候,Angular将对这些值进行无害化处理(Sanitize),对不可信的值进行编码。
h3>BindinginnerHTMLBoundvalue:
{{htmlSnippet}}
ResultofbindingtoinnerHTML:
[innerHTML]="htmlSnippet"
这个属性可以识别HTML标签但不识别标签中的属性值
发现问题
大家都知道Angular中有innerHTML属性来设置要显示的内容,但是如果内容包含CSS样式,无法显示样式的效果。
比如:
publiccontent:string="HelloAngular
只会显示HelloWorld,字体不会是30px,也就是CSS样式没有效果。
解决方案
自定义一个Pipe来对内容做转换。看下面代码。
写一个HtmlPipe类
import{Pipe,PipeTransform}from"@angular/core"; import{DomSanitizer}from"@angular/platform-browser"; @Pipe({ name:"html" }) exportclassHtmlPipeimplementsPipeTransform{ constructor(privatesanitizer:DomSanitizer){ } transform(style){ returnthis.sanitizer.bypassSecurityTrustHtml(style); } }
在需要的模块里面引入管道HtmlPipe
@NgModule({ declarations:[ HtmlPipe ] })
在innerHtml中增加管道名字
这样就可以显示content的CSS样式。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。