我正在检查 Angular 6 项目的源代码，并看到了 @HostBinding('class') 和 @HostBinding('attr.class') 的用法。我将其中一个实现从@HostBinding('class') 更改为@HostBinding('attr.class')，并没有注意到渲染结果有任何差异。两者之间有什么区别，我应该何时选择一种实现而不是另一种？
【问题讨论】：
标签： angular angular2-hostbinding
我认为两者在使用方式上没有任何有意义的区别，但在概念层面上有一个区别：使用 'class' 采用元素的类定义，而 'attr.class' 采用名为“类”的属性的值。
通过仅使用不带属性的'class'，您可以将特定类绑定到布尔值，如下所示：
@HostBinding('class.blue')
@Input() blue: boolean;
然后，假设 HostBinding 在名为 my-directive 的指令中定义，您可以使用以下 HTML：
<div my-directive [blue]="true"></my-directive>
这会导致一个包含class="blue"的div
至于在你的情况下你应该使用哪一个，这并不重要。我会选择简单的class，因为它更短，但在这种情况下真的没关系。
【讨论】：
@HostBinding('class') 和 @HostBinding('attr.class') 具有相同的净效应，使用其中任何一个都会产生相同的结果。
@HostBinding 可用于绑定到宿主元素上的任何类、属性或属性。
您使用哪种语法将取决于您要执行的操作。
如果您尝试动态更改data- 属性，则需要使用@HostBinding('attr.data-special')。
如果你想改变元素的禁用状态，那么你可以使用@HostBinding('disabled')。
您还可以使用@HostBinding('class.myClass') 绑定到单个类或绑定内联样式，例如@HostBinding('style.color')。
【讨论】：