iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 1
0
自我挑戰組

Angular2學習筆記系列 第 1

Angular2 View Encapsulation Mode

可搭配官網文章「Controlling View Encapsulation: Native, Emulated, and None」做閱讀。

@Component({
  selector: 'my-app',
  template: `
    <div class="card card-block">
      <h4>Title</h4>
    </div>
  `,
  styles:[`
  	.card { background-color:gray;} 
    //card是bootstrap 4內建的css component class
  `]      
})
export class MyAppComponent { }

這樣的寫法,可以把CSS styles封裝在元件自己的View,而且不影響應用程式其他部分

此外,我們可以控制view encapsulation mode來設定元件的樣式要如何封裝。

  • Native

它會使用瀏覧器內建支援的Shadow DOM實作規格的功能

元件的View及樣式只會封裝在Shadow DOM,不會被暴露出來

但這個功能只作用在有內建支援Shadow DOM的瀏覧器上,目前這個支援不是很廣泛

所以Angular2是預設使用下一個要介紹的「Emulated」,直到內建可用Shadow DOM為止。

  • Emulated (the default)

設定此模式後,Angular2會透過rename或是增加prefix,來修改class name

用以做出類似Shadow DOM的方式,Render出來的HTML會像下面這個樣子

<my-app _nghost-ric-0="">
    <div _ngcontent-ric-0="" class="card card-block">
      <h4 _ngcontent-ric-0="">Title</h4>
    </div>
</my-app>
  • None

表示Angular2不會做任何的View Encapsulation,它會直接把這段CSS加到Global Styles

所有有用到的Card Class的元件都可能會被這個元件的樣式設定所影響到!

大家可以用我設定的Plunker的程式碼玩玩


下一篇
Angular2的模組化
系列文
Angular2學習筆記19

尚未有邦友留言

立即登入留言