ericltw / notes

0 stars 1 forks source link

Angular Components #65

Open ericltw opened 5 years ago

ericltw commented 5 years ago

Angular Components

介紹

Component定義應用的一部分view,封裝template, data, view行為。

Component metedata

component metadata有以下目的:

Template Syntax

分為三大類:

Reference
ericltw commented 5 years ago

Component Interaction // TODO

ericltw commented 5 years ago

ViewEncapsulation // TODO

Encapsulation policy
ericltw commented 5 years ago

Template Reference

Local Reference

一種獲取對任何DOM element, component, directive,以便在template本身的某個位置使用它。

ViewChild / ViewChildren

component獲得view element, component, directive的引用。

ContentChild / ContentChildren

component獲得content element, component, directive的引用。

Static / Dynamic Queries

@ViewChild() / @ContentChild()的static option決定了何時query result可用。

使用static quieries (static: true),查詢將在創建view後執行,但在change detection之前,因此query的結果不會更新以反應view的更改,如template中包含ngIf / ngFor。

使用static queries (static: false),查詢分別在ngAfterViewInit()和ngAfterContentInit()之後執行,結果會更新以反應view的更改,如template中包含ngIf / ngFor。

ExportAs

定義可在template用於將directive分配給variable。

Reference

ericltw commented 5 years ago

Component Lifecycle

週期
Constructor vs ngOnInit
Reference
ericltw commented 5 years ago

ng-template / ng-container

ng-template和ng-container均是將elements分組在一起,而不必引入element,像是: div, span。

ng-template

TemplateRef

ng-container

ngTemplateOutlet

ng-content vs ngTemplateOutlet

ng-content和ngTemplateOutlet都可以實現highly customized component,差異在於ngTemplateOutlet可以呈現default template。

Reference

ericltw commented 5 years ago

NgZone // TODO

ericltw commented 5 years ago

Change Detection

背景

一個應用會擁有自己的state,這些state會綁定到template,一旦state發生了改變,也會反應在template。

目的

將更改的state同步到template。

介紹

Change detection的基本機制是針對兩種state進行檢查,一個是current state (template),一個是new state,當current state不等於new state時,代表我們需要re-render view。

每個框架都有自己的方式,React使用virtual DOM和reconciliation algorithm,Angular使用change detection。

Strategy

決定執行這個component change detection的觸發條件。

View

介紹

Angular應用是由component tree所組成,在Angular底層,Angular使用low-level的抽象,名為view。為change detection的核心概念。

特性

View State

介紹

每個view都有一個state,Angular根據這個狀態決定是否要執行該view和該view的children view change detection。

Possible States
規則

Change Detection Operations

介紹

主要負責為view運行change detection的主要邏輯位於 checkAndUpdateView(),大部分功能都在child view上操作,從host component開始為每個component recursive調用此函數。

流程

當針對特定view觸發此函數時,它將按照指定順序執行以下操作。

  1. 如果是第一次check view,將state fitstCheck設定為true,否則為false。
  2. 檢查並更新child component / directive的input property。
  3. 更新child view state (如果input property更新,且strategy為OnPush,則將狀態CheckEnabled更新為true)。
  4. 對embedded views進行change detection (重複流程步驟)。//
  5. 如果child view input property更改,則執行child component OnChanges()。
  6. 執行child component OnInit()和DoCheck() (OnInit僅在第一次檢查時調用)。
  7. 在child view上更新ContentChildren的query list。//
  8. 執行child component AfterContentInit()和AfterContentChecked() (AfterContentChecked僅在第一次檢查調用)。
  9. 如果current view的property更改,則更新DOM interpolations。
  10. 對child view執行change detection (重複流程步驟)。
  11. 在current component上更新ViewChildren query list。//
  12. 執行child component AfterViewInit()和AfterViewChecked() (AfterViewInit僅在第一次檢查調用)。
  13. 對current view執行disabled check (在strategy為OnPush的情況下)。
重點

ViewRef

介紹

封裝view,提供操作view的方式。

Method

Reference

Resource

ericltw commented 5 years ago

ElementRef

介紹

包裝native DOM的class。

Security Risk

直接操作DOM,可能使應用更容易受到XSS攻擊,應透過Renderer2 service操作DOM。

Renderer2

介紹

為build-in service,目的是為UI渲染提供抽象,僅能注入component或directive。

Renderer2Factory

介紹

提供create和initialize Renderer2的方式,可用於service。