Open ericltw opened 5 years ago
一種獲取對任何DOM element, component, directive,以便在template本身的某個位置使用它。
component獲得view element, component, directive的引用。
reference ElementRef instance / component instance
可以在component中reference
component獲得content element, component, directive的引用。
@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。
定義可在template用於將directive分配給variable。
How should I use the new static option for @ViewChild in Angular8
Allow user to desine timing of ViewChild / ContentChild queries
ngOnChanges
如果input bindings改變,調用此callback(reference改變)。
ngOnInit
通知可訪問input binding,在整個component生命週期只會調用一次。
ngDoCheck
parent view通知child view將執行child view的change detection。
ngAfterContentInit(只被調用一次) / ngAfterContentChecked
parent view通知child view完成content的change detection。如果需使用@ComtentChild decorator,調用此callback。
ngAfterViewInit(只被調用一次) / ngAfterViewChecked
parent view通知child view完成view的change detection。如果需使用@ViewChild decorator,調用此callback。
ngOnDestroy
component即將被destroy時調用。
constructor
為TypeScript feature,用於依賴注入。
ngOnInit
為Angular lifecycle中其中一個method,能夠訪問input binding,執行初始化logic。
If you think ngDoCheck
means your component is being checked — read this article
What is the difference between ngOnInit(), ngAfterViewInit(), ngafterContentInit(), ngAfterViewChecked() and a constructor()?
What is the difference between ngAfterViewInit() and ngAfterViewChecked()?
The essential difference between Constructor and ngOnInit in Angular
Difference between Constructor and ngOnInit
https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit
ng-template和ng-container均是將elements分組在一起,而不必引入element,像是: div, span。
ng-content和ngTemplateOutlet都可以實現highly customized component,差異在於ngTemplateOutlet可以呈現default template。
Angular ng-template, ng-container and ngTemplateOutlet - The Complete Guide To Angular Templates
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
Everything you need to know about ng-template, ng-content, ng-container, and ngTemplateOutlet in Angular
ng2 - Difference between ng-container and ng-template tags
一個應用會擁有自己的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。
決定執行這個component change detection的觸發條件。
Default
這種strategy是保守的,在每次可能發生更改時都會進行檢查,又稱dirty checking。
OnPush
Angular應用是由component tree所組成,在Angular底層,Angular使用low-level的抽象,名為view。為change detection的核心概念。
每個view都有一個state,Angular根據這個狀態決定是否要執行該view和該view的children view change detection。
主要負責為view運行change detection的主要邏輯位於 checkAndUpdateView(),大部分功能都在child view上操作,從host component開始為每個component recursive調用此函數。
當針對特定view觸發此函數時,它將按照指定順序執行以下操作。
封裝view,提供操作view的方式。
detatch()
從change-detection tree中分離此view,在reattached 之前,部會進行任何檢查。
reattach()
reattach先前分離的view到change-detection tree。
markForCheck()
檢查此view及所有parent view (不觸發change detection,適用於已經在change detection過程中,如ngDoCheck
lifecycle hook,或者在不久後預期會執行change detection)。
detectChanges()
檢查此view及其children view (觸發change detection)。
checkNoChanges() //
檢查此view及其children view,在檢查到變化時throw,用於dev mode。
A gentle introduction into change detection in Angular
https://blog.angularindepth.com/a-gentle-introduction-into-change-detection-in-angular-33f9ffff6f10
Everything you need to know about change detection in Angular
What's the different between markForCheck() and detectChanges()
If you think ngDoCheck
means your component is being checked — read this article
包裝native DOM的class。
直接操作DOM,可能使應用更容易受到XSS攻擊,應透過Renderer2 service操作DOM。
為build-in service,目的是為UI渲染提供抽象,僅能注入component或directive。
提供create和initialize Renderer2的方式,可用於service。
Angular Components
介紹
Component定義應用的一部分view,封裝template, data, view行為。
Component metedata
component metadata有以下目的:
Template Syntax
分為三大類:
Data Binding
Pipes
在template中進行顯示值得轉換。
Directives
Angular根據directive定義的指令決定如何將template轉換為DOM。directive分為三種:
透過添加和刪除DOM來更改DOM布局。
*ngFor
*ngIf
attributes directives
更改element, component或directive的外觀或行為。
ngModel
ngClass
ngStyle
components
component為具有template的directive
Reference