Angular 2本机视图封装 [英] Angular 2 native view encapsulation
问题描述
已经有回答的问题解释了ViewEncapsulation.Emulated，ViewEncapsulation.Native和广告ViewEncapsulation.None之间的区别.
There is already an answered question that explains the difference between ViewEncapsulation.Emulated, ViewEncapsulation.Native ad ViewEncapsulation.None.
比方说，有一个Electron应用程序可以保证与本身支持影子DOM和ViewEncapsulation.Native的Chromium版本捆绑在一起.这种情况如何受益于本机封装以避免仿真开销?
Let's say there is Electron application that is guaranteed to be bundled with Chromium version that natively supports shadow DOM and ViewEncapsulation.Native. How can this case benefit from native encapsulation to avoid emulation overhead?
另一种可能的情况是，由于ViewEncapsulation.Emulated，调试Angular 2应用程序中的视图时，它们的帮助属性和命名空间CSS类非常混乱.
Another possible case is debugging views in Angular 2 application that are heavily cluttered with helper attributes and namespaced CSS classes due to ViewEncapsulation.Emulated.
是否可以将所有未指定encapsulation的组件的默认封装全局更改为ViewEncapsulation.Native?
Can default encapsulation be changed to ViewEncapsulation.Native globally for all components that don't specify encapsulation?
ViewEncapsulation.Native的其他实用工具是什么?
What are the other practical appliances of ViewEncapsulation.Native?
推荐答案
根据 https://github.com/angular/angular/pull/7883 这应该有效
import {CompilerConfig} from '@angular/compiler';
bootstrap(AppComponent, [{
provide: CompilerConfig,
useValue: new CompilerConfig({defaultEncapsulation: ViewEncapsulation.Native})
}])
我还没有尝试过.
我猜想ViewEncapsulation.Native在仅针对Chrome的情况下将是最有利的.在其他浏览器释放对影子DOM的支持之前，似乎还需要花费一些时间.
I guess ViewEncapsulation.Native will be mostly beneficial where one targets Chrome only. It seems it will still take quite some time until other browsers release their shadow DOM support.
主要优点是Angular2不需要向每个组件元素添加属性，并且不再需要将所有组件样式都添加到<head>.
The main benefit is that Angular2 doesn't need to add attributes to each component element and that not all component styles need to be added to <head> anymore.
Emulated的性能并不是什么大问题.
Performance won't be much of an issue in most cases with Emulated when the Offline Template Compiler is used.
这篇关于Angular 2本机视图封装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
