angular 8.1使用中的一些記錄

提及來已經使用了大概一年半的angular，大概已經漸漸習慣了這個前端框架吧，可是具體的原理和底層的代碼都沒有仔細的看過。

前陣子之前作的一個項目有了新的需求，並且比較麻煩，講講作的過程當中遇到的一些問題

首先是勾選狀態的保持問題

在模板中思考了好久，用了各類方法，修改傳入值，頁碼改變之後勾選狀態就是會有奇怪的問題，好比在代碼裏明明把選中的給去掉了，可是頁面上仍是勾選狀態，最後折騰來折騰去，發覺操做的對象不對：頁面上的是模板裏面的list,就是listpagemodel.list，而我以前一直在操做傳入的list,後面操做對象弄對了，只須要操做listpagemodel.list的狀態就能夠控制頁面上的數據。

因此上面給個人經驗就是必定要明白頁面上展現的數據具體是由哪一個對象控制的，對象找對了，控制起來就簡單，對象沒找對，忙活再久也是白乾。

第二個就是本身建立的組件問題

sl-upload是我本身封裝的一個組件

這是組件內部的代碼，很簡單，就是包含了nz的一個上傳組件，還有一些數據的處理

好比上傳以前的判斷大小和類型，還有上傳成功的提示之類的。

之因此本身寫這部分，是由於nzzorro的組件本身雖然有提供大小控制和上傳文件的類型控制，可是限制了之後選中保持之後不會有任何提示。因此就本身封裝一下，加上了提示。

其中遇到的一個不解的問題就是雙向綁定的問題

一開始我單純的覺得只要給[fileList]加上小括號就行
[(fileList)]這樣就變成了雙向綁定，實際上並無，小括號加上去之後毫無做用，組件內部只是接收到了這個fileList

後續的操做，父組件（嚴格來說其實包了三層，是祖孫組件了）裏面是拿不到子組件對fileList的修改的，由於只是單純的傳入了這個值。如今要拿子組件對fileList修改後的值，就須要加上輸出，也就是@Output

下圖的那一行代碼

this.fileListChange.emit(this.fileList)

就是輸出用的，只有改變值的時候加上了這一行代碼，纔算是完成了輸出
才讓父組件中[(fileList)]中的小括號有了意義，否則加不加小括號都沒影響。

這樣才能夠在父組件中拿到通過子組件修改後的fileList的值了。