全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Angular
  4. 正文

Angular项目中,当post请求返回值为一段完整的html代码时,怎样正确的把它嵌入我们的页面?

2020年6月27日 942点热度 2人点赞 0条评论

事情是这样的,我在做一个angular项目,项目中需要向后台请求一个产品详情展示到前端的页面上,后台返回的是一个完整的html页面代码。但是当我直接获取html代码时,整个前端页面都打不开了,报错了,报错如下:

angular返回innerhtml报错

 

后来在stackoverflow上找到了跟我遇到一样问题的人,下面有正确的解决方法:

stackoverflow解决innerhtml

 

于是我就修改了一下我的请求代码:

 

innerhtml问题解决

 

大概意思就是把返回的那一大堆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成功解决问题。

如下:

解决css样式覆盖

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 经验总结 踩坑
最后更新:2020年6月27日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号