Angular页面里元素class的动态绑定的实现源代码调试

例子：考虑这行代码：

 [class.is-current]="isCurrentItem(item)"

如果函数isCurrentItem(item)返回true，则tr标签会被分配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标签分配的is-current class?

在core.js的函数ɵɵclassProp里设置断点进行调试即可：

下面这段代码给tr标签赋上is-current的class：

最后在platform-browser.js里调用浏览器原生的html元素的classList属性的add方法，添加新的is-current类：

同样值得关注的函数还有ɵɵstyleProp.

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

Angular页面里元素class的动态绑定的实现源代码调试相关推荐

Angular页面在开发模式(DevMode)下的ng-reflect-属性是如何生成的
以自定义Component为例: 在渲染该页面时,调用θθproperty方法: setNgReflectProperties这个自描述的方法,设置我们在Angular页面里看到的NgReflect属 ...
Angular应用页面里_ngcontent属性的生成逻辑
我们打开一个Angular应用,发现其渲染页面里的DOM元素,包含了形如_nghost-, 以及_ngcontent-这种属性. 这些属性在platform-browser.js的DomRendere ...
Angular 页面元素的DOM级别的删除过程
我的Angular视图里有如下一组p节点,通过自定义指令控制: <p>The condition is currently<span [ngClass]="{ 'a': ! ...
Angular.js 页面里的按钮点击事件处理
假设我有一个Angular页面,上面绘制了一个按钮: <div class="fd-form__set"><div class="fd-form__it ...
xamarin.forms 绑定页面里指定元素的某个属性值
{Binding Source={x:Reference elementName}, Path=BindingContext.propertyname, Mode=OneWay} elementNam ...
php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易, ...
抓取页面图片元素并保存到本机电脑
在这里主要通过流分析,通过java模拟访问页面获取到页面的html元素,并通过jsoup来分析获取到的html元素, 然后通过流处理来将图片保存到本机 package getpicture;impor ...
Angular 应用里的 vendor.js 是用来干什么的？
What is vendor file in angular? 以 SAP 电商云 UI 的 Angular 页面为例,这个 vendor.js 有超过 17 万行代码: 此文件包含导入您的应用程序 ...
Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue - [object Object]
在开发模式下渲染出的Angular页面包含了很多形如下图ng-reflect-的html属性,很多时候其值都为[object Object]. 如果处于调试目的,需要在Chrome开发者工具里观察这些 ...

Angular页面里元素class的动态绑定的实现源代码调试

Angular页面里元素class的动态绑定的实现源代码调试相关推荐

最新文章

热门文章