<input [value]= "userInput"/>
/** * 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); } }
渲染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; }
在这里给input的value属性赋的值: