Установить для класса CSS Angular HostBinding значение с помощью функции?

У меня есть компонент, который использует @HostBinding для установки класса:

@HostBinding('class.dark-1') true;

Который отлично работает. Однако теперь мне нужно создать функцию в моем компоненте для динамического изменения класса.

Например, с dark-1 на light-2 при нажатии кнопки в компоненте.

Я знаю, как создать функцию и вызвать ее с помощью кнопки, но как изменить класс в привязке хоста и обновить пользовательский интерфейс новым классом?


angular css angular2-hostbinding
person Steve    schedule 17.04.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Просто дайте ему имя свойства:

@HostBinding('class.dark-1') isDark = true;

Затем вы можете изменить его:

this.isDark = false;

Или измените все className:

@HostBinding('class') className = 'dark-1';

this.className = 'light-1';
person funkizer    schedule 17.04.2018
comment
можете ли вы сделать то же самое с атрибутами, которые могут содержать значение? - person roberto tomás; 14.06.2019
comment
Для любого атрибута вы можете сделать @HostBinding('attr.data-my-attribute') myDataAttr = 'value'; Сказав это, я не знаю, почему вы захотите сделать это с Angular. :) Может быть, если вы делаете веб-компонент, который будет использоваться вне приложения Angular, тогда да, иначе я не вижу смысла... - person funkizer; 20.07.2021

arrow_upward
2
arrow_downward

Вы можете переключать флаг clicked при нажатии кнопки и устанавливать классы с помощью геттеров:

@HostBinding("class.dark-1") public get classDark1() {
    return !this.clicked;
}

@HostBinding("class.light-2") public get classLight2() {
    return this.clicked;
}

private clicked = false;

public onClick() {
    this.clicked = true;
}
person ConnorsFan    schedule 17.04.2018