用函数将角HostBinding css类设置为值？

Question

我有一个使用@HostBinding设置类的组件：

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

效果很好。但是，现在我需要在组件中创建一个函数来动态地更改类。

例如，当单击组件中的按钮时，从dark-1到light-2。

我知道如何创建函数并从按钮调用它，但是如何更改主机绑定中的类并使用新类刷新UI呢？

Answer 1

辛普公司给它起了一个财产名称：

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

然后你可以改变它：

this.isDark = false;

或者更改整个className：

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

this.className = 'light-1';

Answer 2

单击该按钮时，可以切换clicked标志，并使用getters设置类：

@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;
}