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

【问题标题】：how to replace jquery in my angular application?如何在我的角度应用程序中替换 jquery？
【发布时间】：2018-06-06 12:53:01
【问题描述】：

我正在构建一个 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 文档中读到我不应该将 angular 与 jquery 一起使用，而应该使用数据绑定，但我该怎么做呢？

【问题讨论】：

这里的问题是您使用 CSS 选择器来附加事件。 Angular 中没有等效的功能，因为 Angular 使用模板表达式或主机绑定。例如;我们不知道上述代码是否针对 HTML 页面上的 all .form-input 元素跨多个组件运行。这就是为什么很难将 jQuery 移植到 Angular。 jQuery 是基于选择器的。 Angular 是基于组件的。我认为最好扔掉你所有的 jQuery 代码，并以正确的 Angular 方式来做。

标签： jquery angular

【解决方案1】：

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

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

【讨论】：

很好的答案，但是当输入是否有焦点时，原始代码会通过添加/删除.label-focus 来改变.form-input 旁边的DOM 元素。我不认为你可以通过纯 CSS 做到这一点。
答案部分正确，因为通过聚焦输入，您无法使用纯 CSS 动态更改对应的标签。还是我错过了什么？

【解决方案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

【讨论】：

这就是我在回答中没有举例的解释；）

【解决方案3】：

尽量避免 jQuery 使用官方声明的 Angular，而是简单地使用 databinding 甚至在 Angular 中绑定。

例如-

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

更多关于这里读出的事件 -

HTML5 event handling(onfocus and onfocusout) using angular 2

或者

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

【讨论】：

【解决方案4】：

既然你想使用一个类，我建议使用文档。

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

export class MyComponent {
  document = document;
}

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

一旦你这样做了，你就可以像这样使用模板变量和activeElement

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

【讨论】：