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

我的疑问是：我在角度文档中读到我不应该使用角度和jquery而我应该使用数据绑定，但我该怎么办？

Answer 1

Pardeep的答案有效，但你可以使用纯CSS来做到这一点。将其添加到您的组件样式：

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

Answer 2

你也可以使用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 3

尽量避免jQuery使用角度为官方声明，而只是使用databinding甚至绑定在Angular中。

例如 -

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

有关此处宣读的活动的更多信息 -

HTML5 event handling(onfocus and onfocusout) using angular 2

或者

您也可以使用ngClass有条件地添加CSS类。

Answer 4

由于您想使用课程，我建议您使用该课程。

首先将文档声明为组件的一部分：

export class MyComponent {
  document = document;
}

（我知道，似乎没用，但这是必需的）。

完成后，您可以使用模板变量和activeElement这样的

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

如何在我的角度应用程序中替换jquery？

4 个答案: