3-1 組件生命週期（1）

ngDoCheck理解爲angular去檢查內部各類值的變化
ngAfterContentInit：理解爲組件裏面嵌套的一些內容，它初始化完畢。
ngAfterContentChecked：投影初始化以後，系統會檢查投影的內容，檢查屬性的變化。爲何要檢查屬性的變化，經過檢查屬性的變化，反饋到視圖上去。

代碼實戰

組件在默認新建的時候已經實現了一個接口OnInit

而後有一個ngOnInit的方法，這個鉤子函數已經默認建在這了。


模板默認生成的時候 也給咱們建了一個構造器


打印兩個東西，查看日誌




實現Oninit的接口其實能夠不加。

這裏暫時先刪掉。


由於已經有了模式的鉤子函數。ngOninit()



可是推薦實現這個接口。

增長OnInit接口的好處,咱們因爲某種失誤，把ngOnInit函數誤刪了

這裏就會提示錯誤，說 應該實現OnInit的接口。

實現接口自動生成的代碼

在團隊合做中其實會有一些做用。有些新人可能不太瞭解要實現什麼樣的接口。實現這個接口，在ngOnInit被刪除後就會啓動規範和約束的做用。就會提示錯誤 說須要實現OnInit的接口。

若是刪掉了接口，tsLint其實也會提示實現這個接口。

接口是可選的，也就說只要有相似ngOnInit這樣的方法存在，聲明週期的鉤子函數仍是正常執行，但建議實現接口，好處是不會因爲誤刪除某個鉤子函數，另外一個是對組件涉及哪些聲明週期一目瞭然





ngOnInit方法內，組件這個類自己就已經構造完畢了。因此在這裏的類 ,咱們能夠很是安全的使用它

ngOnChange

智能提示

導入SimpleChanges

把changes屬性打印出來看一下

輸入屬性是一個字典類型的，字典的每個key值就是你輸入的參數


當前值，第一個值，和上一個值都傳過來。

tsLint提示咱們要實現這個接口。

實現接口OnChanges

實現接口並導入對應的包

父組件內演示

爲了讓你們更清楚onChanges，在它的父組件中改變一下

這是原來的父組件的內容。





每次點擊的時候，處理這個值。
定義顏色的數組。
Math.floor取整數， Math.random取0到不到1的隨機數乘以3 就是0不到3的隨機數






再點擊一次

ngDoCheck

輸入了ngDoCheck後，就會有錯誤提示 ，綠色的線標識，官方認爲一個組件內不該該同時定義ngDoCheck和ngOnChanges這兩個函數。
這兩個鉤子函數要達到的目的某種角度來講是相似的，只不過DoCheck要作髒值監測，。 
爲何組件的屬性變化，或者說是狀態變化後，會體如今界面當中，由於angular框架會對全部組件的狀態進行維護和監測，一但有值發生變化，就會去監測，doCheck這種角度來講就幹這個用的。
onChange的區別就是監聽本身組件自己的屬性變化。doCheck是angular在作整個大的框架型的檢查的時候，到達這個組件的時候，它就會發生doCheck的這個事件。
一個是框架幫你作的就是doCheck，一個是你主動關心的也就是OnChanges。因此他倆在某種角度是重合的




這裏先無論，先在doCheck內輸出

結束