Angular 2 本机视图封装

Angular 2 native view encapsulation

本文关键字：封装 视图 本机 Angular      更新时间：2023-09-26

已经有一个问题的答案解释了ViewEncapsulation.Emulated、ViewEncapsulation.Native广告ViewEncapsulation.None之间的区别。

假设有Electron应用程序保证与本机支持影子DOM和ViewEncapsulation.Native的Chromium版本捆绑在一起。这种情况如何从本机封装中受益以避免仿真开销？

另一种可能的情况是调试 Angular 2 应用程序中的视图，这些视图由于ViewEncapsulation.Emulated而严重混乱，由帮助程序属性和命名空间的 CSS 类组成。

是否可以将未指定encapsulation的所有组件的默认封装更改为全局ViewEncapsulation.Native？

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 支持之前仍需要相当长的时间。

主要好处是 Angular2 不需要为每个组件元素添加属性，并且不再需要将所有组件样式添加到<head>。

在大多数情况下，使用脱机模板编译器时，性能不会成为Emulated问题。

相关文章：