您好,登錄后才能下訂單哦!
Angular form控件原生HTML代碼里ng-reflect-form屬性和其值的生成時(shí)機(jī)是什么,針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
簡單的Component代碼:
import { Component } from '@angular/core';import { FormControl } from '@angular/forms';@Component({ selector: 'app-reactive-favorite-color', template: ` Favorite Color: <input type="text">})export class ReactFormComponent { favoriteColorControl = new FormControl('');}
如下圖所示:ng-reflect-form這個(gè)屬性運(yùn)行時(shí)是如何生成的?
bootstrap里調(diào)用_loadComponent:
changeDetectorRef的策略:RootViewRef:
ComponentRef指向的AppComponent,能看到Component的property:
loadComponent里顯式調(diào)用tick:
tick函數(shù)里進(jìn)行change detect:
Angular Component html里加了方括號(hào)的Directive,瀏覽器是無法識(shí)別的,在Angular core.js里,在執(zhí)行Component template實(shí)現(xiàn)函數(shù)時(shí),會(huì)調(diào)用Angular的??property函數(shù),將中括號(hào)包裹的Angular指令展開:Update a property on a selected element.
element指向input控件:
需要添加到input標(biāo)簽頁的屬性名稱為form:
經(jīng)過normalizeDebugBindingValue里面的正則化處理完屬性form之后,返回的值:
ng-reflect-form
待寫入input ng-reflect-form屬性的值:
為了避免value的值過于復(fù)雜時(shí),序列化生成的json字符床過大,污染了最后的原生html,在normalizeDebugBindingValue里只是簡單的調(diào)用toString函數(shù):
// Limit the size of the value as otherwise the DOM just gets polluted.
這就是最后在Chrome開發(fā)者工具里看到的[object Object]的由來:
關(guān)于Angular form控件原生HTML代碼里ng-reflect-form屬性和其值的生成時(shí)機(jī)是什么問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。