Can some one explain what's the difference between ViewEncapsulation.Native, ViewEncapsulation.None and ViewEncapsulation.Emulated in angular2.
I tried to google it and read some articles, but I'm not able to understand the difference.
Below I have two components Home (home.ts) i.e. parent component and MyComp (my-comp.ts). I want to define styles in the parent that are being used in the child component.
Should I use ViewEncapsulation.Native or 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 {
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…