angular控制视图的3种封装模式

原生 (Native)、仿真 (Emulated) 和无 (None)

• Native 模式使用浏览器原生的 Shadow DOM 实现来为组件的宿主元素附加一个 Shadow DOM。组件的样式被包裹在这个 Shadow DOM 中。(译注：不进不出，没有样式能进来，组件样式出不去。)

• Emulated 模式（默认值）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。 更多信息，见附录 1 。(译注：只进不出，全局样式能进来，组件样式出不去)

• None 意味着 Angular 不使用视图封装。 Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。 从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)

如何改变?

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'kylin-camera',
  templateUrl: './camera.component.html',
  styleUrls: ['./camera.component.less'],
  encapsulation: ViewEncapsulation.Native
})

转载于:https://my.oschina.net/u/3615170/blog/1825361