重寫爲角度2或jQuery插件

Question

我目前在Angular 2中開始我的第一個項目，這個項目有多個表單元素，它們將相互交互。下面的例子：

<div class="form__elem form__elem__field"> 
    <input class="form__elem__field__input" type="text" name="name" id="firstname"> 
    <div class="form__elem__field__label"> 
     <label for="firstname" class="form__elem__field__label__content">Your Name</label> 
    </div> 
    <div class="form__elem__field__bar"> 
     <div class="form__elem__field__bar--default"></div> 
     <div class="form__elem__field__bar--focus"></div> 
     <div class="form__elem__field__bar--danger"></div> 
     <div class="form__elem__field__bar--warning"></div> 
    </div> 
</div> 

我要在重點form__elem__field__input類form__elem__field__bar--default--active添加到form__elem__field__bar--default。

表單元素還將與範圍外的其他元素進行交互。

---

我是否需要使用角2寫這些交互還是完全可以接受建立一個jQuery插件，我使用觸發角

Answer 1

<div class="form__elem form__elem__field"> 
    <input class="form__elem__field__input" type="text" name="name" id="firstname" (focus)="focusFunction()"> 
    <div class="form__elem__field__label"> 
     <label for="firstname" class="form__elem__field__label__content">Your Name</label> 
    </div> 
    <div class="form__elem__field__bar"> 
     <div class="form__elem__field__bar--default" [ngClass]="{'my-class': isClassVisible }"></div> 
     <div class="form__elem__field__bar--focus"></div> 
     <div class="form__elem__field__bar--danger"></div> 
     <div class="form__elem__field__bar--warning"></div> 
    </div> 
</div> 


myClass:string = 'form__elem__field__bar--default'; 
focusFunction(){ 
    this.myClass = 'form__elem__field__bar--default--active'; 
} 

閱讀更多信息HTML5 event handling(onfocus and onfocusout) using angular 2