zoukankan      html  css  js  c++  java
  • Angular框架下从后端获取的HTML片段无法应用本地样式

    问题:公司需要做一个类似邮箱的模块,收到消息,点击查看对应的内容,获取到代码片段插入到对应的html时,发现返回的html片段上的类名没有生效。

    解决:听过修改Angular 提供的ViewEncapsulation值。

    介绍一下ViewEncapsuelation:

    有三个值: Emulated, None, Shadow(Native(已改用Shadow))

     1.Emulated,默认值,在该模式下,组件之间的样式不会互相影响,他会给每个类名单独就加一个标识,防止样式被覆盖,如下图

    2.None,不会给类名单独增加标识,相当于直接使用html代码和样式,是直接应用整个document,容易造成样式覆盖,所以样式使用一定要定位准确。

    3.Shadow模式,使用原生的shadow DOM封装,就是将使用这个模式的组件单独用shadow-root包裹起来,只有这个组件的样式会对组件生效,公共样式无法对这个组件生效。这很适合封装自己的HTML,CSS,JAVASCRIPT,比如video这个标签就是用Shadow DOM封装的

    通过上面三个属性值的介绍,我们想要实现后端返回的html片段应用本地的样式,就必须改变默认的ViewEncapsuelation模式,让他像原生一样使用样式把ViewEncapsuelation设置为none。

    如下图设置:

  • 相关阅读:
    牛客练习赛27 水图(思维+暴搜)
    差分
    矩阵化一维
    倍增法 求公共祖先
    vector 牛逼 +lower_bound+ upper_bound
    cmp和sort
    字符串的比较
    s 贪心
    太鼓达人 (有位运算的作用,但可能理解错了哈哈)
    kao shi di er ti(还没有订正)
  • 原文地址:https://www.cnblogs.com/userGao/p/14145220.html
Copyright © 2011-2022 走看看