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