Index.html has a base tag. Href is /:

GetBaseElementHref:

GetBaseHref:

Inside your relativePath is a dynamically created scene with document.createElement(‘ a ‘) :

Component HTML:

<input [value] ="userInput"/>
Copy the code

Component’s userInput property:

How do the values of the Component property userInput stream to the HTML page at runtime?

/**
     * 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; }}Copy the code

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 {? } * /
        consttView = lView[TVIEW]; renderComponentOrTemplate(tView, lView, tView.template, rootComponent); }}Copy the code

In the rootContext property of core.js, expand Components to see all AppComponent properties and values:

Rendering UI:





Here’s a very important way to move a value from the Component property to the 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; }Copy the code

renderer.setProperty:



The value assigned to the input value property here:

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: