▪️進階配置
2024-7-19
| 2025-3-19
字數 386閱讀時間 1 分鐘

encapsulation ⇒ 樣式範圍配置

控制樣式的隔離程度,有三個選項:
  • Emulated:
    • 此模式可確保組件的樣式不會洩漏並影響其他組件。但是,在元件外部定義的全域樣式仍可能影響具有模擬封裝的元件內部的元素
      ⇒ 可使用 ::ng-deep 來讓樣式設定取消封裝,但 angular 官方不推薦
  • ShadowDom:
    • 此模式嚴格保證只有該元件的樣式適用於元件範本中的元素。全域樣式不能影響影子樹中的元素,影子樹內部的樣式也不能影響影子樹外部的元素。
  • None
    • 不隔離樣式,樣式會應用到全局範圍。
 

changeDetection ⇒ 變更策略

畫面變更的策略,有兩個選項:
  • Default:
    • 預設策略,每當應用程式範圍內發生任何活動時,Angular 都會檢查元件的 DOM 是否需要更新。觸發此檢查的活動包括使用者互動、網路回應、計時器等。
  • OnPush:
    • 在此模式下,框架僅在以下情況下檢查組件的 DOM 是否需要更新:
    • 組件輸入因模板中的綁定而發生更改
    • 該元件中的事件監聽器運行
    • 該組件透過 ChangeDetectorRef.markForCheck 或包裝它的東西(例如 AsyncPipe )明確標記為檢查。
 

PreserveWhitespace ⇒ 保留空白

開啟此配置的話 angular 就不會刪除 模板中的空白
 
  • Angular
  • Angular - 內嵌綁定 (Interpolation)動態渲染元件
    Loading...