Component html源代碼：

<div [ngClass]="colorclass" >Click me</div>

Component源代碼：

export class AppComponent implements OnInit {counter = 0;get colorclass(){console.log('Jerry: ' + this.counter++);return "blueclass";}

Component css文件：

.blueclass {color: blue;}

測試：

運行時，最后通過HTML DOM原生的el.classList.add(“blueclass”)去添加class:

調用棧：

eval @ VM2789:1 addClass @ platform-browser.js:1238 addClass @ animations.js:613 (anonymous) @ common.js:3930 _toggleClass @ common.js:3924 (anonymous) @ common.js:3849 forEachAddedItem @ core.js:28345 _applyIterableChanges @ common.js:3843 ngDoCheck @ common.js:3800 callHook @ core.js:4731 callHooks @ core.js:4691 executeInitAndCheckHooks @ core.js:4631 refreshView @ core.js:12027 refreshComponent @ core.js:13459 refreshChildComponents @ core.js:11730 refreshView @ core.js:12065 renderComponentOrTemplate @ core.js:12143 tickRootContext @ core.js:13666 detectChangesInRootView @ core.js:13700 detectChanges @ core.js:15409 tick @ core.js:43147 _loadComponent @ core.js:43197 bootstrap @ core.js:43123 (anonymous) @ core.js:42698 _moduleDoBootstrap @ core.js:42694 (anonymous) @ core.js:42649 invoke @ zone-evergreen.js:364 onInvoke @ core.js:41669 invoke @ zone-evergreen.js:363 run @ zone-evergreen.js:123 (anonymous) @ zone-evergreen.js:857 invokeTask @ zone-evergreen.js:399 onInvokeTask @ core.js:41647 invokeTask @ zone-evergreen.js:398 runTask @ zone-evergreen.js:167 drainMicroTaskQueue @ zone-evergreen.js:569 Promise.then (async) scheduleMicroTask @ zone-evergreen.js:552 scheduleTask @ zone-evergreen.js:388 scheduleTask @ zone-evergreen.js:210 scheduleMicroTask @ zone-evergreen.js:230 scheduleResolveOrReject @ zone-evergreen.js:847 then @ zone-evergreen.js:979 bootstrapModule @ core.js:42679 ./src/main.ts @ main.ts:11 __webpack_require__ @ bootstrap:79 0 @ unless.directive.ts:33 __webpack_require__ @ bootstrap:79 checkDeferredModules @ bootstrap:45 webpackJsonpCallback @ bootstrap:32 (anonymous) @ main.js:1

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

總結

以上是生活随笔為你收集整理的使用Angular的property binding给HTML DOM元素的class动态赋值的全部內容，希望文章能夠幫你解決所遇到的問題。

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