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