在Angular 4中toggleClass()无法工作

Question

我已经添加了 jQuery 的脚本并使用了。

 import * as $ from 'jquery';   

还有，我已经在HTML文件中添加了jQuery。

但是我的toggleClass()函数不起作用。当我检查控制台时，它没有显示任何错误。它只是空的。

以下是我的 HTML 和 ts 代码：

HTML 代码：

 <div class="web" (click) = "myFunc()">
    <p>
        Web Development&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       $300
    </p>
 </div>
 <div class="design" (click) = "myFunc()">
    <p>
      Design &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      $400
    </p>
  </div>
  <div class="integration" (click) = "myFunc()">
     <p>
        Integration &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      $20
    </p>
  </div>
  <div class="training" (click) = "myFunc()">
    <p> 
     Training &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      $500
    </p>
  </div>
</div>
<div class="total">
   Total &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   $0
</div>

TS代码：

import { Component } from '@angular/core';
import * as $ from 'jquery';
//declare var jquery:any;
//declare var $ :any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myFunc() {
    $(this).toggleClass("active");
  }
}

- Nikita

---

使用jQuery来完成这个任务毫无意义，因为使用angular非常简单。更不用说this不是一个元素。 - charlietfl

Answer 1

您不需要使用 jquery，只需在视图上更改您的点击绑定为 (click)="myFunc($event)"，并在 myFunc 中更改为：

myFunc(e) {
    const target: HTMLElement = e.target;
    target.classList.toggle('active');
}

- Luan Bitar

Answer 2

可能不起作用是因为$(this)指的是当前类实例。

要使其正常工作，您需要在jquery中引用源元素。从模板传递'$event'对象到您的函数，并在函数内获取目标对象：

<div class="web" (click) = "myFunc($event)">

myFunc(event: any) {
  $(event.target).toggleClass("active");
}

请查看这个 Stackblitz： https://stackblitz.com/edit/angular-dsely1。

- ppgowda4