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

前陣子以前做的一個專案有了新的需求，而且比較麻煩，講講做的過程中遇到的一些問題

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

在模板中思考了很久，用了各種方法，修改傳入值，頁碼改變以後勾選狀態就是會有奇怪的問題，比如在程式碼裡明明把選中的給去掉了，但是頁面上還是勾選狀態，最後折騰來折騰去，發覺操作的物件不對：頁面上的是模板裡面的list,就是listpagemodel.list，而我之前一直在操作傳入的list,後面操作物件弄對了，只需要操作listpagemodel.list的狀態就可以控制頁面上的資料。

所以上面給我的經驗就是一定要明白頁面上展示的資料具體是由哪個物件控制的，物件找對了，控制起來就簡單，物件沒找對，忙活再久也是白乾。

第二個就是自己建立的元件問題

sl-upload是我自己封裝的一個元件

這是元件內部的程式碼，很簡單，就是包含了nz的一個上傳元件，還有一些資料的處理

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

之所以自己寫這部分，是因為nzzorro的元件自己雖然有提供大小控制和上傳檔案的型別控制，但是限制了以後選中保持以後不會有任何提示。所以就自己封裝一下，加上了提示。

其中遇到的一個不解的問題就是雙向繫結的問題

一開始我單純的以為只要給[fileList]加上小括號就行

[(fileList)]這樣就變成了雙向繫結，實際上並沒有，小括號加上去以後毫無作用，元件內部只是接收到了這個fileList

後續的操作，父元件（嚴格來講其實包了三層，是祖孫元件了）裡面是拿不到子元件對fileList的修改的，因為只是單純的傳入了這個值。現在要拿子元件對fileList修改後的值，就需要加上輸出，也就是@Output

下圖的那一行程式碼

this.fileListChange.emit(this.fileList)

就是輸出用的，只有改變值的時候加上了這一行程式碼，才算是完成了輸出

才讓父元件中[(fileList)]中的小括號有了意義，不然加不加小括號都沒影響。

這樣才可以在父元件中拿到經過子元件修改後的fileList的值了。

到此這篇關於angular 8.1使用過程中的一些記錄的文章就介紹到這了,更多相關angular 8.1使用記錄內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！