angular - Angular 2 切换类的简单指令

Question

我在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>

对不起，我现在没有任何代码，但我需要帮助才能开始

标签： angularangular2-directives

Answer 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;
  }

}

组件.ts

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

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