在Angular中，无法通过jQuery的click()来触发点击事件的调用

2 年 ago
文, 翔
1 minute

我们在使用jQuery运营时，决定引入Angularjs的背景是因为中途发现它的优势。

只用一个选项来将以下句子翻译为中文：

如果使用jQuery的click()方法，无法在Angular中调用点击事件的触发器。

是的，尽管可以使用 $(“#myButton”).click(); 来触发事件，但不能直接触发 Angular 的 (click) 事件绑定。jQuery 的 .click() 方法触发的是 DOM 的原生点击事件。

Angular的 (click) 事件绑定在Angular的区域内被处理。这个区域与Angular的变更检测机制集成，以一种与DOM的原生事件处理方式不同的方式进行处理。

要使用Angular的(click)事件绑定来触发jQuery的.click()方法，需要明确地触发Angular的区域。

作为具体的方法，可以考虑使用NgZone服务在Angular的zone中触发事件。以下是一个例子。

import { Component, NgZone, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-example',
  template: '<a id="myButton" (click)="openPcWindow()">保存方法はこちら</a>',
})
export class ExampleComponent implements AfterViewInit {

  constructor(private zone: NgZone) {}

  ngAfterViewInit() {
    $(document).ready(() => {
      $('#myButton').on('click', () => {
        // NgZoneを使用してAngularのゾーン内でイベントをトリガー
        this.zone.run(() => {
          this.openPcWindow();
        });
      });

      // jQueryを使用してクリックイベントをトリガー
      $("#myButton").click();
    });
  }

  openPcWindow() {
    console.log('openPcWindow function called!');
  }
}

在这段代码中，我们使用NgZone在Angular的区域内执行openPcWindow方法。这样一来，即使使用jQuery的.click()方法，也能成功触发Angular的(click)事件绑定。

一旦jQuery的点击事件被触发，就调用Angular函数。

一般情况下，不建议在Angular中直接使用jQuery。原因是可能与Angular提供的数据绑定和事件监听机制发生冲突。

然而，考虑到可能会故意使用jQuery触发点击事件的情况，以下是在这种情况下的方法。

    首先，在项目中安装jQuery。
npm install jquery --save
    在Angular组件中导入jQuery。
import * as $ from 'jquery';
    然后，在组件的生命周期方法之一的ngAfterViewInit内使用jQuery来触发按钮的点击事件。
import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-example',
  template: '<a id="myButton" (click)="openPcWindow()">保存方法はこちら</a>',
})
export class ExampleComponent implements AfterViewInit {

  ngAfterViewInit() {
    $('#myButton').click(() => {
      this.openPcWindow();
    });
  }

  openPcWindow() {
    console.log('openPcWindow function called!');
  }
}

在以上的代码中，我们在ngAfterViewInit中使用jQuery的click方法来调用openPcWindow函数。

然而，只有在特殊情况下才使用此方法。在通常的Angular开发中，最佳实践是使用模板内的 (click)指令来进行事件监听。

bannerAds