說起來已經(jīng)使用了大概一年半的angular，大概已經(jīng)漸漸習(xí)慣了這個(gè)前端框架吧，但是具體的原理和底層的代碼都沒有仔細(xì)的看過。

前陣子以前做的一個(gè)項(xiàng)目有了新的需求，而且比較麻煩，講講做的過程中遇到的一些問題

首先是勾選狀態(tài)的保持問題

在模板中思考了很久，用了各種方法，修改傳入值，頁碼改變以后勾選狀態(tài)就是會(huì)有奇怪的問題，比如在代碼里明明把選中的給去掉了，但是頁面上還是勾選狀態(tài)，最后折騰來折騰去，發(fā)覺操作的對(duì)象不對(duì)：頁面上的是模板里面的list,就是listpagemodel.list，而我之前一直在操作傳入的list,后面操作對(duì)象弄對(duì)了，只需要操作listpagemodel.list的狀態(tài)就可以控制頁面上的數(shù)據(jù)。

所以上面給我的經(jīng)驗(yàn)就是一定要明白頁面上展示的數(shù)據(jù)具體是由哪個(gè)對(duì)象控制的，對(duì)象找對(duì)了，控制起來就簡(jiǎn)單，對(duì)象沒找對(duì)，忙活再久也是白干。

第二個(gè)就是自己創(chuàng)建的組件問題

sl-upload是我自己封裝的一個(gè)組件

這是組件內(nèi)部的代碼，很簡(jiǎn)單，就是包含了nz的一個(gè)上傳組件，還有一些數(shù)據(jù)的處理

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

之所以自己寫這部分，是因?yàn)閚zzorro的組件自己雖然有提供大小控制和上傳文件的類型控制，但是限制了以后選中保持以后不會(huì)有任何提示。所以就自己封裝一下，加上了提示。

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

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

[(fileList)]這樣就變成了雙向綁定，實(shí)際上并沒有，小括號(hào)加上去以后毫無作用，組件內(nèi)部只是接收到了這個(gè)fileList

后續(xù)的操作，父組件（嚴(yán)格來講其實(shí)包了三層，是祖孫組件了）里面是拿不到子組件對(duì)fileList的修改的，因?yàn)橹皇菃渭兊膫魅肓诉@個(gè)值?，F(xiàn)在要拿子組件對(duì)fileList修改后的值，就需要加上輸出，也就是@Output

下圖的那一行代碼

this.fileListChange.emit(this.fileList)

就是輸出用的，只有改變值的時(shí)候加上了這一行代碼，才算是完成了輸出

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

這樣才可以在父組件中拿到經(jīng)過子組件修改后的fileList的值了。

到此這篇關(guān)于angular 8.1使用過程中的一些記錄的文章就介紹到這了,更多相關(guān)angular 8.1使用記錄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論