Угловой 6 в чем разница между @HostBinding ('class') и @HostBinding ('attr.class')

Question

Я проверяю исходный код проекта Angular 6 и видел использование как @HostBinding('class'), так и @HostBinding('attr.class').Я изменил одну из реализаций с @HostBinding('class') на @HostBinding('attr.class') и не заметил никакой разницы в отображаемом результате.Каковы различия между ними и когда я должен выбрать одну реализацию над другой?

Answer 1

@HostBinding('class') & @HostBinding('attr.class') имеют одинаковый чистый эффект, и использование любого из них даст тот же результат.@HostBinding может использоваться для привязки к любому классу, свойству или атрибуту в элементе хоста.Какой синтаксис вы используете, будет зависеть от того, что вы пытаетесь сделать.

Если вы пытаетесь динамически изменить атрибут data-, вам нужно будет использовать @HostBinding('attr.data-special').

Если вы хотите изменить отключенное состояние элемента, вы должны использовать@HostBinding('disabled').

Вы также можете привязать к отдельным классам, используя @HostBinding('class.myClass') или привязать встроенные стили, такие как @HostBinding('style.color').

Answer 2

Я не думаю, что между этими двумя способами есть какое-либо значимое различие в том, как вы его используете, но есть одно отличие на концептуальном уровне: использование 'class' берет определение класса элемента, тогда как 'attr.class' принимаетзначение атрибута с именем «класс».

Используя только 'class' без атрибута, вы можете затем связать определенные классы с логическим значением, например так:

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

Затем, предполагая, что HostBinding определен в директиве с именем my-directive, вы можете использовать этот HTML:

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

И это приведет к div, который содержит class="blue"

Что касается того, который вы должны использовать в вашем случае, он недействительно важно.Я бы выбрал просто class, потому что он короче, но это действительно не имеет значения в этом случае.