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>

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

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

}

component.ts

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

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

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

Angular 2简单指令来切换类

2 个答案: