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树,所以其内部的样式达到了隔离效果。

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

     

    
    
  • 相关阅读:
    整理一些笔试题(要求手写代码的)
    网络笔试题
    链表-单链表的各种操作
    C语言-排序-希尔排序
    C语言-排序-选择排序
    C语言-排序-归并排序
    C语言-排序-插入排序
    [转载]iOS 10 UserNotifications 框架解析
    Objective-C枚举的几种定义方式与使用
    【转载】iOS屏幕适配设计
  • 原文地址:https://www.cnblogs.com/longhx/p/6947632.html
Copyright © 2011-2022 走看看