小编Par*_*mod的帖子

有人可以解释ViewEncapsulation.Native, ViewEncapsulation.None和ViewEncapsulation.Emulated in angular2之间的区别.

我试着谷歌并阅读一些文章,但我无法理解其中的差异.

下面我有两个组件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 {
}

我-comp.ts

import {Component} from 'angular2/core';

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