zoukankan      html  css  js  c++  java
  • Angular2-三种样式封装策略的区别

      Angular2有三种样式封装方式,分别是None、Native、Emulated。

      可用元数据“encapsulation”配置,配置方式如下:

    • encapsulation: ViewEncapsulation.None
    • encapsulation: ViewEncapsulation.Emulated
    • encapsulation: ViewEncapsulation.Native

      三者有什么区别呢?

      None:

      使用None策略,组件配置的样式没做任何封装;它会直接在文档树种插入<style>标签,这个样式全局有效。

      Emulated:

      使用Emulated策略,组件配置的样式只在该组件的元素上生效(不包括宿主元素);它是给每个样式名加入一个程序自动生成的属性,同时该组件所有的元素也会被添加该样式,组件之外的元素没有这个属性,从而达到隔离效果。

      注意:这个策略的样式只作用在该组件的元素上,外部组件以及子组件没有对应隔离属性,所以样式不会作用到外部组件和子组件上

      Native:

      使用Native策略,Angular2会使用"shadow DOM"技术对组件所有元素进行隔离(类似iframe的分离效果)。元素被独立出正常的DOM树,所以其内部的样式达到了隔离效果。

      注意:使用这个策略的组件被独立出去了,所以全局样式没法作用到组件内部。如果组件元素需要用到全局样式,千万别使用这种封装策略

     

    
    
  • 相关阅读:
    1002. 查找常用字符
    1047. 删除字符串中的所有相邻重复项
    3. 无重复字符的最长子串
    剑指 Offer 57
    239. 滑动窗口最大值
    476. 数字的补数
    876. 链表的中间结点
    973. 最接近原点的 K 个点
    面试题 02.04. 分割链表
    1616. 分割两个字符串得到回文串
  • 原文地址:https://www.cnblogs.com/longhx/p/6947632.html
Copyright © 2011-2022 走看看