事情是这样的,我在做一个angular项目,项目中需要向后台请求一个产品详情展示到前端的页面上,后台返回的是一个完整的html页面代码。但是当我直接获取html代码时,整个前端页面都打不开了,报错了,报错如下:
后来在stackoverflow上找到了跟我遇到一样问题的人,下面有正确的解决方法:
于是我就修改了一下我的请求代码:
大概意思就是把返回的那一大堆html代码转换为text格式来接收。这下页面不报错了,但是怎样把这样一段代码嵌入到我的前端页面呢?我想到了使用iframe的方法,结果不成功。后来我想起了大地老师讲的innerHtml标签,于是一试便成功了。
<div [innerHTML]="myHtml"></div>
myHtml
就是封装的后端传过来的html代码。
但是新的问题出现了,这样引入的html代码,样式全部丢失了。这是什么原因呢?
经过网上查阅我大概知道了这是angular的什么安全机制,不允许加载这种页面的css文件。但是网上也给出了解决的办法,也就是引入DomSanitizer
来解决这个问题:
import { DomSanitizer } from '@angular/platform-browser'; # 引入模块 constructor(private sanitizer: DomSanitizer) { } # 构造器中声明 · · · this.myHtml = this.sanitizer.bypassSecurityTrustHtml(this.myHtml); # 把我封装好的html放进去
这样再把myHtml
放到页面中,样式就全部回来了。
但是我又遇到了新的问题,就是这个从后端来的代码的样式覆盖掉了我原先页面一些的样式,导致页面出现了一些奇怪的位移。于是我就把本地的样式代码加上!important
成功解决问题。
如下:
文章评论