angular4學習記錄 -- 組件通訊、生命周期

shadajin 發布于2019-08-21 16:45 / 453人閱讀

摘要：每完成被投影組件內容發生變化時調用。每次做完組件視圖和子組件視圖的變更檢測之后調用。組件銷毀時調用，主要用于內存回收。策略策略是當組件的輸入屬性發生變更時才會檢查當前組件及其子組件。

angular4 組件通訊、生命周期 主要通訊形式

父組件通過屬性綁定到子組件，子組件通過事件傳遞參數到父組件

父組件通過局部變量獲取子組件的引用

父組件使用@ViewChild獲取子組件的引用

兩個不相關聯的組件使用中間人模式交互

終極大招:創建一個服務注入到組件中

直接把父組件當做服務注入到子組件中

組件的輸入輸出屬性

輸入輸出屬性必須是在有父子關系的組件間使用

輸入屬性

@Input() 
private keyword: string;

輸出屬性

@Output()
searchResult: EventEmmiter = new EventEmmiter();

使用中間人模式傳遞數據 組件生命周期以及angular的變化發現機制 生命周期

constructor

構造函數。

ngOnchanges

綁定屬性發生變化的時候調用，第一次調用一定在ngOnInit之前。

ngOninit

第一輪ngChanges之后調用，本鉤子只調用一次。

ngDoCheck

在ngOnInit和ngDoCheck之后，會一直檢查。

ngAfterContentInit

當內容投影進組件之后調用。第一次ngDoCheck之后調用，只調用一次，只適用于組件。父組件調用完成之后，所有子組件才會調用。

ngAfterContentChecked

每完成被投影組件內容發生變化時調用。ngAfterContentInit和ngDocheck之后調用，只適用于組件。父組件調用完成之后，所有子組件才會調用。

ngAfterViewInit

初始化完成組件試圖及其子視圖之后調用。第一次ngAfterContentChecked之后調用，只調用一次，只適用于組件。所有子組件調用完成之后，父組件才會調用。此階段更改屬性的值會報錯，可在settimeout后運行。

ngAfterViewChecked

每次做完組件視圖和子組件視圖的變更檢測之后調用。ngAfterViewInit和ngAfterContentChecked之后調用，只適用于組件。所有子組件調用完成之后，父組件才會調用。此階段更改屬性的值會報錯，可在settimeout后運行。

ngDoDestory

組件銷毀時調用，主要用于內存回收。路由跳轉時組件會銷毀。

執行順序：

constructor
    ↓
ngOnChanges
    ↓  
ngOnInit
    ↓
ngDoCheck
    ↓
ngAfterContentInit
    ↓
ngAfterContentChecked
    ↓
ngAfterViewInit
    ↓
ngAfterViewChecked

ngDoCheck
    ↓
ngAfterContentChecked
    ↓
ngAfterViewChecked
    ...
ngDestory

angular的變化發現機制 default策略

無論變更發生在哪個組件上，zone.js都將會檢查整個angular組件樹，從根組件appComponent開始，直至所有組件全部檢查完成。

onpush策略

onpush策略是當組件的輸入屬性發生變更時才會檢查當前組件及其子組件。

GPU云服務器云服務器生命周期軟件生命周期生命周期理論頁面生命周期

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88684.html

Angular4學習筆記——組件之間的交互

摘要：具體思路子組件暴露一個屬性，當事件發生時，子組件利用該屬性向上彈射事件。父組件綁定到這個事件屬性，并在事件發生時作出回應。這個組件子樹之外的組件將無法訪問該服務或者與它們通訊。父子組件通過各自的構造函數注入該服務。通過輸入型綁定把數據從父組件傳到子組件 Angular對于父組件 => 子組件的數據通信做法和Vue很相似。 // 父組件html模板 // 子組件接收數據 i...

Guakin_Huang 2019-08-21 17:48 評論0 收藏0
Angular4學習筆記——生命周期鉤子

摘要：所以如果需要使用生命周期，只要在我們的代碼中寫上鉤子函數即可，會找到并調用像這樣的鉤子方法，有沒有接口無所謂。當使用構造函數新建一個組件或指令后，就會按下面的順序在特定時刻調用這些生命周期鉤子方法用處當設置數據綁定輸入屬性發生變化時響應。接口和鉤子在介紹生命周期的相關概念之前，可以先復習一下TypeScript對于接口的概念。在這里主要使用的是類接口及其實現： interf...

fizz 2019-08-21 17:48 評論0 收藏0
Angular2 VS Angular4 深度對比：特性、性能

摘要：的特性和性能是的超集，用于幫助的開發。注解提供了連接元數據和功能的工具。通過在庫中提供基本信息可以調用函數或創建類的實例來檢查相關元數據，從而簡化了對象實例的構建。停用它會響應跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應用開發領域，Angular被認為是最好的開源JavaScri...

孫淑建 2019-08-20 18:37 評論0 收藏0
Angular4學習筆記——數據綁定

摘要：所以，在的世界中，唯一的作用是用來初始化元素和指令的狀態。當進行數據綁定時，只是在與元素和指令的和事件打交道，而就基本上靠邊站了，只有比較特殊的情況才會用到他。事件綁定事件名事件綁定分為對原生事件綁定和自定義事件綁定。數據綁定總體而言有三種類型： {{...}} 插值表達式綁定屬性綁定（包括property和attitude 事件綁定插值表達式綁定既可以寫在html結構中，...

MRZYD 2019-08-21 17:48 評論0 收藏0
Angular4之五服務器通訊

摘要：可以與任何支持與服務器進行通訊。首先，我們使用用語言創建一個服務器。一創建服務器步驟創建一個空的項目，取名為，名字可以按照情況而取。中，處理異步代碼通常有種方式回調承諾可觀察對象使用命令行組件名實例組件名為。運行時發生錯誤，提示改為則正常。 Angular可以與任何支持http與websocket服務器進行通訊。首先，我們使用node.js用typescript語言創建一個web服務...

Taste 2019-08-22 15:32 評論0 收藏0