Angular里的style property binding的一个例子

Component模板的源代码：

<div [style.color] = "color">Hello</div>

color get函数的实现：

这一行执行完之后，div的黑色就变成红色了：

updateStyling:

实现源代码：

/**
 * Writes class/style to element.
 *
 * @param {?} renderer Renderer to use.
 * @param {?} isClassBased `true` if it should be written to `class` (`false` to write to `style`)
 * @param {?} rNode The Node to write to.
 * @param {?} prop Property to write to. This would be the class/style name.
 * @param {?} value Value to write. If `null`/`undefined`/`false` this is considered a remove (set/add
 *        otherwise).
 * @return {?}
 */
function applyStyling(renderer, isClassBased, rNode, prop, value) {
    /** @type {?} */
    const isProcedural = isProceduralRenderer(renderer);
    if (isClassBased) {
        // We actually want JS true/false here because any truthy value should add the class
        if (!value) {
            ngDevMode && ngDevMode.rendererRemoveClass++;
            if (isProcedural) {
                ((/** @type {?} */ (renderer))).removeClass(rNode, prop);
            }
            else {
                ((/** @type {?} */ (rNode))).classList.remove(prop);
            }
        }
        else {
            ngDevMode && ngDevMode.rendererAddClass++;
            if (isProcedural) {
                ((/** @type {?} */ (renderer))).addClass(rNode, prop);
            }
            else {
                ngDevMode && assertDefined(((/** @type {?} */ (rNode))).classList, 'HTMLElement expected');
                ((/** @type {?} */ (rNode))).classList.add(prop);
            }
        }
    }
    else {
        // TODO(misko): Can't import RendererStyleFlags2.DashCase as it causes imports to be resolved in
        // different order which causes failures. Using direct constant as workaround for now.
        /** @type {?} */
        const flags = prop.indexOf('-') == -1 ? undefined : 2 /* RendererStyleFlags2.DashCase */;
        if (value == null /** || value === undefined */) {
            ngDevMode && ngDevMode.rendererRemoveStyle++;
            if (isProcedural) {
                ((/** @type {?} */ (renderer))).removeStyle(rNode, prop, flags);
            }
            else {
                ((/** @type {?} */ (rNode))).style.removeProperty(prop);
            }
        }
        else {
            ngDevMode && ngDevMode.rendererSetStyle++;
            if (isProcedural) {
                ((/** @type {?} */ (renderer))).setStyle(rNode, prop, value, flags);
            }
            else {
                ngDevMode && assertDefined(((/** @type {?} */ (rNode))).style, 'HTMLElement expected');
                ((/** @type {?} */ (rNode))).style.setProperty(prop, value);
            }
        }
    }
}

调用的HTML原生操作：

DOM.style.color = ‘red’;

更多Jerry的原创文章，尽在：“汪子熙”: