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的原创文章，尽在：“汪子熙”: