Angular 2 切换类的简单指令答案

【问题标题】：Angular 2 simple directive to toggle classAngular 2 切换类的简单指令
【发布时间】：2018-10-04 11:27:13
【问题描述】：

我在 html 中有这样的结构

<div class="col-8">
    text
</div>
<div class="col-4">
    text
</div>

我需要的是在我的 app.component.ts 中创建一个简单的指令，它会点击一些元素切换和广告类 col-12，而不是 html会是这样的

<div class="col-8 col-12">
    text
</div>
<div class="col-4 col-12">
    text
</div>

很抱歉，我现在没有任何代码，但我需要帮助才能开始

【问题讨论】：

对ngClass有任何想法吗？
是的，但是如何在指令中获取该元素和切换类？

标签： angular angular2-directives

【解决方案1】：

使用 HostBinding 装饰器绑定属性

customDirective.ts

import { Directive,HostBinding,HostListener } from '@angular/core';

@Directive({
  selector: '[appDynamicClass]'
})
export class DynamicClassDirective {

@HostBinding('class.col-12') isActive=false;

  constructor() { }

  @HostListener('click',['$event']) onClick(){
    console.log('clicked');
    this.isActive=!this.isActive;
  }

}

component.ts

<button class="col-2" appDynamicClass>
  Click
</button>

例如：https://stackblitz.com/edit/hostbinfing

【讨论】：

【解决方案2】：

为什么需要指令，我们可以使用 ngClass 属性来实现。

<div class="col-8" (click)="handleClick()" [ngClass]="{'col-12' : icClick}">
    text
</div>
<div class="col-4" (click)="handleClick()" [ngClass]="{'col-12' : icClick}">
    text
</div>

组件

icClick = false;
handleClick(){
   this.icClick = !this.icClick;
}

【讨论】：

我需要指令，因为在其他地方我将拥有可以处理该问题的图标，也可能在几个地方
使用指令可以概括此类行为。您的解决方案只在一个地方完成。