控件视图的Angular2封装样式

Angular2控件视图的封装样式为什么要分享控件视图的封装样式？主要原因是我们大部分的Angular项目都会引入一个UI组件，但是往往我们会因为需求和关系而修改UI组件的样式。这时候有些人因为对View封装中的属性不是很了解，往往直接在globalstyle.js中添加globalstyles。当项目越来越大时，会出现一些未知的bug，维护也会变得困难。如果利用好视图的封装模式，将会帮你解决很多问题。通常，组件的CSS样式被封装到它自己的视图中，而不会影响应用程序的其余部分。您可以通过在组件的元数据上设置视图封装模式来单独控制每个组件的封装模式。Angular2具有三种样式封装模式：ViewEncapsulation.Native——使用原生ShadowDom。ViewEncapsulation.Emulated-angular2的默认值，通过预处理（并重命名）CSS代码来模拟ShadowDOM的行为，在标签中添加标识来固定样式的范围，从而将CSS样式限制在组件中看法。ViewEncapsulation.None-没有ShadowDom，样式没有被封装，Angular会在全局样式中添加CSS。而不是应用上面讨论的范围规则、隔离和保护。本质上，这与将组件的样式直接放入HTML中是一样的。ViewEncapsulation.Emulated下Angular应用程序的DOM树中的每个DOM元素都附加了一些附加属性。神奇先生团队生成的属性分为两种：1.一个元素在原生打包方式下可能是ShadowDOM的宿主，这里会自动添加一个_nghost属性。这对于组件的宿主元素来说是典型的。2.组件视图中的每个元素都有一个_ngcontent属性，该属性会标记该元素是哪个主机的模拟ShadowDOM。用法如下：import{Component,OnInit,ViewEncapsulation}from'@angular/core';@Component({selector:'app-factor_analysi',templateUrl:'./factor_analysis.component.html',styleUrls:['./factor_analysis.component.scss'],providers:[factor_analysis_api],封装:ViewEncapsulation.None})