Question

我是Angular2的完整菜鸟，所以如果问题非常基本，我会提前道歉。所以我有一个带手风琴菜单的侧栏。我需要父母和孩子在点击时改变他们的背景颜色（所以基本上在扩展部分）。我知道我可以点击每个div父节点来设置输出，如下所示：

(click)="toggleClass()"

对我来说不太清楚的是我在构造函数中放入了什么，在toggleClass（）中。我相信我需要在某种程度上使用ngClass，但我有点迷失。请参阅plunker here。

谢谢！

Answer 1

您可以使用NgClass指令：https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

export class NameComponent {
    booleanVariable: boolean;
    
    constructor() {
    }
    
    toggleClass(){
      if(!this.booleanVariable) {
        this.booleanVariable = true;
      else {
        this.booleanVariable = false;
      }
    }
}

.className {
  background: red;
}

<button type="button" (click)="toggleClass()" class="btn btn-transparent" [ngClass]="{'className': booleanVariable}"data-toggle="collapse" data-target="#project-details">Projects</button>

Angular2 - 单击时切换父级和子级样式

1 个答案: