将 Angular HostBinding css class 设置为具有功能的值？

Question

我有一个组件使用 @HostBinding 来设置 class:

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

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

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

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

Answer 1

您可以在单击按钮时切换 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;
}

Answer 2

简单地给它起一个属性名字：

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

那你就可以改了：

this.isDark = false;

或更改整个类名：

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

this.className = 'light-1';

将 Angular HostBinding css class 设置为具有功能的值？

Set Angular HostBinding css class to value with function?

css

angular2-hostbinding

angular