Angular2 - 单击时切换父子样式答案

【问题标题】：Angular2 - toggle parent and children style on clickAngular2 - 单击时切换父子样式
【发布时间】：2017-05-22 21:29:05
【问题描述】：

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

(click)="toggleClass()"

我不太清楚在toggleClass() 中我在构造函数中放入了什么。我相信我需要以某种方式在这里与 ngClass 合作，但我有点迷茫。请参阅 plunker here。

谢谢！

【问题讨论】：

你的 plunker 只是一个 HTML 文档，你能发布你的组件吗？

标签： javascript html css angular onclick

【解决方案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;
}

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

【讨论】：