Angular2 的 View Encapsulation（样式封装）
angular2 版本：2.4.8, 测试代码地址
Shadow Dom
开始之间，建议先了解下Shadow Dom 方面的知识
View Encapsulation 的种类
- ViewEncapsulation.None - 没有Shadow Dom，样式没有封装，全局可以使用。
- ViewEncapsulation.Emulated - angular2的默认值，模仿 Shadow Dom，通过在标签上增加标识，来固定样式的作用域。
- ViewEncapsulation.Native - 使用原生的Shadow Dom。
ViewEncapsulation.None
@Component({
selector: 'component-one',
template: `
<div class="red"></div>
<br>
<div class="green"></div>
<br>
<div class="blue"></div>
`,
styles:[`
.green{
background-color: green;
width:20px;
height: 20px;
}
`],
encapsulation:ViewEncapsulation.None
})
生成的<head>标签中的<style>中的样式是没有作用域的。和普通在<head>标签中的<style>中引用的标签一样，作用域全局。
ViewEncapsulation.Emulated
@Component({
selector: 'app-root',
template:`
app-component
<div class="red"></div>
<br>
<div class="green"></div>
<br>
<div class="blue"></div>
<br>
<br>
component-one
<component-one></component-one>
component-two
<component-two></component-two>
`,
styles:[`
.red{
background-color: red;
height: 20px;
width: 20px;
}
`]
})
生成的<head>标签中的<style>中的样式是有作用域的。[ ]方括号内的表明了作用域。这是css选择器的一种。
.red[_ngcontent-fnb-0]{
background-color: red;
height: 20px;
width: 20px;
}
ViewEncapsulation.Native
@Component({
selector: 'component-two',
template: `
<div class="red"></div>
<br>
<div class="green"></div>
<br>
<div class="blue"></div>
`,
styles:[`
.blue{
background-color: blue;
width: 20px;
height: 20px;
}
`],
encapsulation:ViewEncapsulation.Native
})
不会再<head>标签中的<style>中生成样式,所以也无法作用与其他组件。实际效果着这样的:
总结
- 如果在子组件中使用的css样式不想影响全局，可以不用设置（默认ViewEncapsulation.Emulated）。
- 可以在main.ts设置 ViewEncapsulation.None 将引用css设置为影响全局，一般用来设置一个网站的字体整体样式什么的。
网友评论