typescript - ViewEncapsulation.Native、ViewEncapsulation.None 和 ViewEncapsulation.Emulated 之间的区别

Question

谁能解释一下 angular2ViewEncapsulation.Native、 ViewEncapsulation.None 和 ViewEncapsulation.Emulated 之间的区别强>.

我试着用谷歌搜索它并阅读了一些文章，但我无法理解其中的区别。

下面我有两个组件 Home (home.ts)，即父组件和 MyComp (my-comp.ts)。我想在子组件中使用的父组件中定义样式。

我应该使用 ViewEncapsulation.Native 还是 ViewEncapsulation.None

home.ts

import {Component, ViewEncapsulation} from 'angular2/core';
import {MyComp} from './my-comp';
@Component({
  selector: 'home',  // <home></home>
  providers: [
  ],
  directives: [
    MyComp
  ],
  styles: [`
    .parent-comp-width {
       height: 300px;
       width: 300px;
       border: 1px solid black;
     }
    `],
  template:`
    <my-comp></my-comp>
    <div class="parent-comp-width"></div>
  `,
  encapsulation: ViewEncapsulation.Native
})
export class Home {
}

my-comp.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'my-comp',  // <home></home>
  template: `
  <div class="parent-comp-width">my-comp</div>
  `
})
export class MyComp {
}

Answer 1

更新如果您希望将添加到 Parent 的样式应用到 Child，您需要在 Child 中设置 ViewEncapsulation.None组件，因此它不会阻止样式渗入。

Emulated 和 Native 只是防止样式渗入组件和从组件渗出的两种不同方式。 None 是唯一允许样式跨越组件边界的样式。

原创

• ViewEncapsulation.None 就是简单不封装

• ViewEncapsulation.Emulated(目前 Angular2 中的默认设置)
  将属性添加到组件标签和子元素，并操作添加到页面的 CSS(将属性添加到选择器)，这样样式就不会相互渗透 - 即使样式都是在加载组件时添加到页面头部收集的。

• ViewEncapsulation.Native 使用影子 DOM 创建自定义元素，其中浏览器的 native 实现可确保样式范围。
  如果浏览器本身不支持 shadow DOM，则需要 web 组件 polyfill 来调整行为。这与 ViewEncapsulation.Emulated 类似，但 polyfill 更昂贵，因为它们会填充大量浏览器 API，即使其中大部分从未使用过。 Angulars Emulated 模拟只是增加了它使用的成本，因此对于 Angular 应用程序来说效率更高。