Angular中@HostBinding('attr.class')代码作用及相关疑问求解

这行代码是Angular中用于操作组件宿主元素的属性绑定，你在模板里找不到相关内容是因为它作用的对象不是模板内部的元素，而是组件本身的宿主标签。

具体拆解： #

• @HostBinding('attr.class')：告诉Angular，要把组件类里的变量绑定到宿主元素的class属性上。宿主元素就是你在父组件中使用该组件时写的标签，比如你的组件叫app-item，父组件里的<app-item></app-item>就是宿主元素。
• cssClass = 'item'：组件类内部的变量，初始值设为'item'。这会自动给宿主元素加上class="item"，最终渲染后的DOM会变成<app-item class="item"></app-item>。

额外说明： #

如果后续在组件逻辑里修改cssClass的值（比如this.cssClass = 'item active'），宿主元素的class会自动同步更新，不需要手动操作DOM。

内容的提问来源于stack exchange，提问作者hawarden_