Javascript 在使用jquery时，DOM操作在角度上很慢

我正在开发一个Angular应用程序，在我的dashboard.comp.ts中，我需要实现jquery事件（，由于我使用jquery的其他原因），jquery事件可以与我的typescript对象正常工作。现在的问题是，当我点击jquery时，DOM操作得到延迟，所以，输出得到延迟，比如：5/7秒

仪表板组件

import { Component, OnInit} from '@angular/core';
import SensorServices from '../Services/Settings/SensorServices';
declare var $: any;

@Component({
    selector: 'app-root',
    templateUrl: '../Views/Dashboard.html',
    providers: [SensorServices]
})

export class DashboardComponent implements OnInit {
    public sensor: any;
    constructor(private _sensorServices: SensorServices )
    {

    }
    ngOnInit(): void {

        this._sensorServices.getAll({})
            .subscribe((result) => {
                var self=this;
                $(document).on('click', '.sensorSizeInDesign', function (e) {
                    self.sensor=result;
                });
            });
    }
}

html 注意：给定的html基本上是从服务器端生成的较少元素，因此有多个传感器。这里有一个例子

<div class='sensorSizeInDesign' data-sensorId="123"></div>
<h3>{{sensor.Port}}</h3>

{{sensor.Port}

对于每个单击事件端口，获取要更改的延迟。ngOnInit（）：void{

---

尝试在

angular

应用程序中避免使用

jQuery

。因此

@ViewChild

存在：

您的单击处理程序应以以下方式实现：

function onClick() {
  this._sensorServices.getAll({}).subscribe((result) => {
    this.sensor=result;
  })
}

HTML:

{{sensor.Port}

我终于找到了解决方案：只需更新我的jquery代码：

ngOnInit(): void {

    this._sensorServices.getAll({})
        .subscribe((result) => {
            var self=this;
             $('.sensorSizeInDesign').click(function(e){
                self.sensor=result;
             })
        });
}

---

您不应该在角应用程序中使用jQuery。使用“代码> >视图子程序/代码>代替DOM访问；从上面考虑这是一个符号。我不能实现函数OnCLIKEL（）。在里面file@sebu当然可以-为什么不可以？让我试着使用@ViewChildwhy ViewChild，按照这家伙的建议做有什么不对？为什么你要绕过Angular直接跑到DOM？它不会咬人。@Messervill我的评论是指向它前面的评论，而不是你的答案，我加上了一个d。直接使用ViewChild，f或者像字符串插值这样简单的事情是不需要的。正如这个答案中的代码片段所示-这是正确的方法。正如我在回答中建议的那样，您应该尝试摆脱jquery-并且您还可以使用这个实现摆脱

var self=this

：

$（'.sensorSizeInDesign'）。单击（（）=>{this.sensor=result；}）

Ok@messerbill，当然。

<div class='sensorSizeInDesign' (click)="onClick()" data-sensorId="123"></div>
<h3>{{sensor.Port}}</h3>

ngOnInit(): void {

    this._sensorServices.getAll({})
        .subscribe((result) => {
            var self=this;
             $('.sensorSizeInDesign').click(function(e){
                self.sensor=result;
             })
        });
}