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

Question

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

Answer 1

Я не думаю, что между этими двумя способами есть какое-либо значимое различие в том, как вы их используете, но на концептуальном уровне есть одно различие: использование '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 потому что это короче, но это действительно не имеет значения в этом случае.

Answer 2

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

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

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

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