Question

我正在使用Angular。我有一个带有一些HTML的组件，它概述了一些基本信息，例如标题和一些子信息，如日期。

我有几个按钮，我想通过添加一个类来改变现场字体。当我单击三个按钮中的任何一个时，可以将一个类应用于父div（我相信使用CSS然后可以相应地更改子元素，而不是向每个元素添加类），例如designOne / {{ 1}}而另一个被删除。

designTwo

Answer 1

具有正确条件的父div上的ng-class应该可以正常工作。通过单击按钮，您将使用ng-click更改条件中使用的变量。

angularjs：https://docs.angularjs.org/api/ng/directive/ngClass

angular：https://angular.io/api/common/NgClass

Answer 2

一种非常简单的方法是将您的父类属性绑定到Component属性，并通过按钮点击更改此属性。

模板：

<div [class]="currentParentClass">
    <h1> class="albumHeader" Header One </h1>
</div>
<button (click)="switchClass('designOne')"> Design One </button>
<button (click)="switchClass('designTwo')"> Design One </button>

组件：

private currentParentClass = "designOne"

switchClass(selectedName: string) {
    this.currentParentClass = selectedName
}

如何在按钮点击上添加和删除类

2 个答案: