javascript - toggleClass() 在 Angular 4 中不起作用

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

Answer 1

您不需要使用 jquery，只需将 View 上的点击绑定(bind)更改为 (click)="myFunc($event)"，然后在 myFunc 更改为:

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