Angular页面里元素class的动态绑定的实现源代码调试
生活随笔
收集整理的這篇文章主要介紹了
Angular页面里元素class的动态绑定的实现源代码调试
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
例子:考慮這行代碼:
[class.is-current]="isCurrentItem(item)"如果函數(shù)isCurrentItem(item)返回true,則tr標(biāo)簽會被分配is-current class.
isCurrentItem的計算邏輯:
/*** Indicates whether the given item is the current item.** The current item is driven by the `currentItem`, that holds a* property and value to compare.*/isCurrentItem(item: any): boolean {if (!this.currentItem || !this.currentItem.value) {return false;}return this.currentItem?.value === item?.[this.currentItem?.property];}什么時候給這個tr標(biāo)簽分配的is-current class?
在core.js的函數(shù)??classProp里設(shè)置斷點進行調(diào)試即可:
下面這段代碼給tr標(biāo)簽賦上is-current的class:
最后在platform-browser.js里調(diào)用瀏覽器原生的html元素的classList屬性的add方法,添加新的is-current類:
同樣值得關(guān)注的函數(shù)還有??styleProp.
更多Jerry的原創(chuàng)文章,盡在:“汪子熙”:
總結(jié)
以上是生活随笔為你收集整理的Angular页面里元素class的动态绑定的实现源代码调试的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SAP WebIDE destinati
- 下一篇: 执掌苹果媒体战略18年 乔布斯时代的苹果