[Day12] 有關 Angular 畫面封裝

第 11 屆 iThome 鐵人賽

DAY 13

Modern Web

Angular 8 從推坑到放棄系列第 13 篇

11th鐵人賽

TimTim

2019-09-29 20:38:03

2491 瀏覽

分享至

Angular 可以針對個別的 Component 自定義 css 屬性，一開始可以設定為不影響其他 Component，也可以設定為 component 會影響到其他的 component封裝方式．並且說明其使用技巧．先來介紹 Shadow DOM 和 View Encapsulation。

Shadow DOM

隔離 DOM：組件的 DOM 是獨立的（例如，document.querySelector() 不會返回組件 shadow DOM 中的節點）。
作用域 CSS：shadow DOM 內部定義的 CSS 在其作用域內。樣式規則不會泄漏，頁面樣式也不會滲入。
組合：爲組件設計一個聲明性、基於標記的 API。
簡化 CSS - 作用域 DOM 意味着您可以使用簡單的 CSS 選擇器，更通用的 id/類名稱，而無需擔心命名衝突。
效率 - 將應用看成是多個 DOM 塊，而不是一個大的（全局性）頁面。

View encapsulation

設置 encapsulation 是在 @Component裝飾器裡面

而 encapsulation 有 4 種不同設定方式

None: style 直接被包裝到 <head> 的<style>裡面，宣告的 css 會影響到其他的 Components
Emulated: style 被包裝到 <head> 的 <style> 裡面，但可以辨識要對應的 Component，預設也是這個，讓 component 自設的 css 不會影響到其他 component
Native: 如同預期一般為網頁組件
ShadowDom: 使用 ShadowDOM 的方式渲染

使用對應的 css File

可以針對個別的 component 使用 css，只要在該 component 中的裝飾器中指定對應的css檔或是直接寫，就可以對該 component 設定 css ，而且預設是不會影響到其他的 component

app.component.css

.container {
  margin-top: 30px;
}

p {
  color: blue;
}

app.component.html

<div class="container">
  <app-cockpit></app-cockpit>
  <hr />
</div>
<p>I am p in app.component.html will effect by app.component.css</p>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  serverElements = [{ type: 'server', name: 'TestServer', content: 'Just a Test' }];
}

或是可以在 component 直接使用 css

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['.container {margin-top: 30px;}', 'p {color: blue;']
})
export class AppComponent {
  serverElements = [{ type: 'server', name: 'TestServer', content: 'Just a Test' }];
}

View encapsulation 對應的顯示結果

如果使用 Emulated，其顯示css效果只有套用在該 component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['.container {margin-top: 30px;}', 'p {color: blue;'],
  // encapsulation: ViewEncapsulation.Native
  // encapsulation: ViewEncapsulation.Emulated
  // encapsulation: ViewEncapsulation.ShadowDom
})
export class AppComponent {
  serverElements = [{ type: 'server', name: 'TestServer', content: 'Just a Test' }];
}