Angular6 @HostBinding('class') 和@HostBinding('attr.class') 有什么区别

Question

我正在检查 Angular 6 项目的源代码，看到了 @HostBinding('class') 和 @HostBinding('attr.class') 的用法。我将其中一个实现从 @HostBinding('class') 更改为 @HostBinding('attr.class') 并且没有注意到渲染结果有任何差异。两者之间有什么区别？我什么时候应该选择一种实现而不是另一种实现？

Answer 1

我认为两者在您使用它的方式上没有任何有意义的区别，但在概念层面上有一个区别：使用 'class' 采用 class 定义元素，而 'attr.class' 取名为 "class" 的属性的值。

通过仅使用不带属性的 'class'，您可以将特定的 classes 绑定到布尔值，如下所示：

@HostBinding('class.blue')
@Input() blue: boolean;

然后，假设 HostBinding 是在名为 my-directive 的指令中定义的，您可以使用此 HTML:

<div my-directive [blue]="true"></my-directive>

它会导致 div 包含 class="blue"

至于在你的情况下应该使用哪一个，这并不重要。我会简单地使用 class 因为它更短，但在那种情况下它真的无关紧要。

Answer 2

@HostBinding('class') 和 @HostBinding('attr.class') 具有相同的净效果，使用其中任何一个都会产生相同的结果。 @HostBinding 可用于绑定到宿主元素上的任何 class、属性或属性。您使用哪种语法将取决于您要执行的操作。

如果您尝试动态更改 data- 属性，则需要使用 @HostBinding('attr.data-special').

如果您想更改元素的禁用状态，则可以使用 @HostBinding('disabled')。

您还可以使用 @HostBinding('class.myClass') 绑定到单个 classes 或绑定内联样式，例如 @HostBinding('style.color').

Angular6 @HostBinding('class') 和@HostBinding('attr.class') 有什么区别

Angular 6 what is the difference between @HostBinding('class') and @HostBinding('attr.class')

angular2-hostbinding

angular