複製jQuery代碼在Angular2

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