乐趣区

关于angular:Angular-form控件原生HTML代码里ngreflectform属性和其值的生成时机

简略的 Component 代码:

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-reactive-favorite-color',
  template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl">
  `
})
export class ReactFormComponent {favoriteColorControl = new FormControl('');
}

如下图所示:ng-reflect-form 这个属性运行时是如何生成的?

bootstrap 里调用_loadComponent:

changeDetectorRef 的策略:RootViewRef:

ComponentRef 指向的 AppComponent,能看到 Component 的 property:

loadComponent 里显式调用 tick:

tick 函数里进行 change detect:

Angular Component html 里加了方括号的 Directive,浏览器是无奈辨认的,在 Angular core.js 里,在执行 Component template 实现函数时,会调用 Angular 的ɵɵproperty 函数,将中括号包裹的 Angular 指令开展:Update a property on a selected element.

element 指向 input 控件:

须要增加到 input 标签页的属性名称为 form:

通过 normalizeDebugBindingValue 外面的正则化解决完属性 form 之后,返回的值:

ng-reflect-form

待写入 input ng-reflect-form 属性的值:

为了防止 value 的值过于简单时,序列化生成的 json 字符床过大,净化了最初的原生 html,在 normalizeDebugBindingValue 里只是简略的调用 toString 函数:
// Limit the size of the value as otherwise the DOM just gets polluted.

这就是最初在 Chrome 开发者工具里看到的 [object Object] 的由来:

important takeaway

setNgReflectProperty 函数

更多 Jerry 的原创文章,尽在:” 汪子熙 ”:

退出移动版