Component模板的源代碼：

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

color get函數(shù)的實現(xiàn)：

這一行執(zhí)行完之后，div的黑色就變成紅色了：

updateStyling:

實現(xiàn)源代碼：

/*** 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 classif (!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);}}} }

調(diào)用的HTML原生操作：

DOM.style.color = ‘red’;

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Angular里的style property binding的一个例子的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。