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