javascript - 使用 jquery 时 DOM 操作在 Angular 上很慢

Question

我正在开发一个Angular应用程序，在我的dashboard.comp.ts中我需要实现jquery事件(由于我使用jquery的其他原因)，jquery事件与我的 typescript 对象一起正常工作。现在的问题是，当我点击 jquery 时，DOM 操作会出现延迟，因此，输出会出现延迟:5/7 秒。

dashboard.comp.ts

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>

对于每个点击事件，端口延迟都会更改。

Answer 1

避免在 Angular 应用程序中使用 jQuery。因此 @ViewChild 存在:

https://angular.io/api/core/ViewChild

您的点击处理程序应按以下方式实现:

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

HTML:

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