как заменить jquery в моем угловом приложении?

Question

Я создаю приложение Angular и использую jquery для динамического изменения входного класса с помощью событий focusin и focusout, как вы можете видеть из кода ниже:

$(".form-input").focusin(function(){
        $(this).addClass("focus");
        $(this).prev().addClass("label-focus");
});
$(".form-input").focusout(function(){
        $(this).removeClass("focus");
        $(this).prev().removeClass("label-focus");
});

Я сомневаюсь:Я прочитал в угловых документах, что я не должен использовать angular с jquery и что вместо этого я должен использовать привязку данных, но как я могу это сделать?

Answer 1

Вы также можете использовать ngClass:

<label for="input" [ngClass]="{ 'active': isActive}">Name</label>
<input
  type="text"
  name="input"
  [ngClass]="{ 'active': isActive}"
  (focus)="isActive = !isActive"
  (blur)="isActive = !isActive">

и объявить свойство в компоненте:

export class AppComponent  {
  isActive = false;
}

https://stackblitz.com/edit/toggle-class-on-focus-and-blur-event-in-angular

Answer 2

Ответ Пардипа работает, но вы можете сделать это, используя чистый CSS.Добавьте это к вашему стилю компонента:

.form-input:focus {
    background-color: red;
}

Answer 3

Поскольку вы хотите использовать класс, я бы порекомендовал использовать документ.

Начните с объявления документа как части вашего компонента:

export class MyComponent {
  document = document;
}

(я знаю, кажется бесполезным, но это необходимо).

Как только вы это сделаете, вы можете использовать переменные шаблона и activeElement вот так

<label [class.input-focused]="document.activeElement === nameInput">Name :</label>
<input #nameInput [class.focused]="document.activeElement === nameInput">

Answer 4

Старайтесь избегать jQuery с угловым, как указано официальным, вместо этого просто используйте databinding или даже связывание в угловом.

например -

<input (focus)='focusEvent($event)'>

Подробнее о событиях читайте здесь-

• обработка событий HTML5 (onfocus и onfocusout) с использованием угловых значений 2

или

Классы CSS можно добавлять условно с помощьюngClass тоже.