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
})