index.html里有個base標簽頁，href屬性為/:

getBaseElementHref：

getBaseHref：

relativePath里有個document.createElement(‘a’)動態創建的場景：

Component html：

<input [value]= "userInput"/>

Component的userInput屬性：

運行時，Component屬性userInput的值是如何流到HTML頁面上去的？

/*** Invoke this method to explicitly process change detection and its side-effects.** In development mode, `tick()` also performs a second change detection cycle to ensure that no* further changes are detected. If additional changes are picked up during this second cycle,* bindings in the app have side-effects that cannot be resolved in a single change detection* pass.* In this case, Angular throws an error, since an Angular application can only have one change* detection pass during which all change detection must complete.* @return {?}*/tick() {if (this._runningTick) {throw new Error('ApplicationRef.tick is called recursively');}try {this._runningTick = true;for (let view of this._views) {view.detectChanges();}if (this._enforceNoNewChanges) {for (let view of this._views) {view.checkNoChanges();}}}catch (e) {// Attention: Don't rethrow as it could cancel subscriptions to Observables!this._zone.runOutsideAngular((/*** @return {?}*/() => this._exceptionHandler.handleError(e)));}finally {this._runningTick = false;}}

function tickRootContext(rootContext) {for (let i = 0; i < rootContext.components.length; i++) {/** @type {?} */const rootComponent = rootContext.components[i];/** @type {?} */const lView = (/** @type {?} */ (readPatchedLView(rootComponent)));/** @type {?} */const tView = lView[TVIEW];renderComponentOrTemplate(tView, lView, tView.template, rootComponent);} }

在core.js的rootContext屬性里，展開Components， 能看到所有AppComponent的屬性和值：

渲染UI：

下面這是一個非常重要的從Component屬性將值移動到UI上的方法：

/*** @fileoverview added by tsickle* Generated from: packages/core/src/render3/instructions/property.ts* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc*/ /*** Update a property on a selected element.** Operates on the element selected by index via the {\@link select} instruction.** If the property name also exists as an input property on one of the element's directives,* the component property will be set instead of the element property. This check must* be conducted at runtime so child components that add new `\@Inputs` don't have to be re-compiled** \@codeGenApi* @template T* @param {?} propName Name of property. Because it is going to DOM, this is not subject to* renaming as part of minification.* @param {?} value New value to write.* @param {?=} sanitizer An optional function used to sanitize the value.* @return {?} This function returns itself so that it may be chained* (e.g. `property('name', ctx.name)('title', ctx.title)`)**/ function ??property(propName, value, sanitizer) {/** @type {?} */const lView = getLView();/** @type {?} */const bindingIndex = nextBindingIndex();if (bindingUpdated(lView, bindingIndex, value)) {/** @type {?} */const tView = getTView();/** @type {?} */const tNode = getSelectedTNode();elementPropertyInternal(tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, false);ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);}return ??property; }

renderer.setProperty:

在這里給input的value屬性賦的值：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。