Question

我在jQuery中有这样的代码：

$('#btn').click(function(){
 if($('.element').hasClass('active')){       
    $('.element').removeClass('active'); 
 }
 else{
    $('.element').addClass('active');
 }
});

Angular2中此类代码的类比是什么。我想我必须把它放到相关组件中。有什么想法吗？

Answer 1

根据expression的值，删除并添加了真或假active类。要了解详情，请转到documentation

<div [ngClass]="{active:expression}"></div

Answer 2

使用@Input()和`@HostBinding（）

读取并设置类

@Component({
  selector: 'sub-ele',
  template: `
  <div>hasActiveClass: {{hasActive}}</div>
  <button (click)="toggle()">toggle</button>
`
})
export class MyComponent {
  // read all classes from the DOM
  @Input('class') classes;

  // reflect the hasActive state to the DOM
  @HostBinding('class.active') hasActive = false;

  toggle() {
    this.hasActive = !this.hasActive;  
  }

  // initialize the `hasActive` state
  ngOnInit() {
    this.hasActive = this.classes && 
        this.classes.split(' ').indexOf('active') != -1;
  }

Plunker

在Angular2中复制jQuery代码

2 个答案: