使用 jquery 以编程方式触发 ionic3 元素的单击事件

Question

我正在尝试从jquery或本机dom事件手动触发元素的(ionic)单击事件。

例如，假设我有以下内容：

条目.html

<button [id]="id" (click)="entryClicked()></button>

条目.ts

@Component({
selector: 'entry',
templateUrl: 'entry.html',
})
export class EntryComponent {
constructor() {}
id = "entry_1"
entryClicked () {
console.log(id +" has been clicked")
}
}

从另一个服务，我想在entry_1上触发点击事件。

问题：这个其他服务与第一个服务完全分开，它是一个提供者，据我所知，我无法使用@ViewChild并从中@ViewChildren。所以我不能直接访问entry组件的功能。

外部服务网

import { Injectable } from '@angular/core';
import * as $ from 'jquery';
@Injectable()
export class ExternalServiceProvider {
constructor( ) { }
someEvent () {
$("#entry_1").click();
}
}

触发someEvent()不会像我希望的那样触发entryClicked()。
这不是加载的问题，#entry_1 元素是由 jquery 找到的。只是离子绑定到元素的(click)事件似乎与jquery点击事件无关。 如果我使用同样的问题$("#entry_1")[0].click().
但是，如果我单击页面中的元素，它会正确触发。

如何从 DOM 触发原始离子点击事件，无论有没有 jquery？

Answer 1

我认为您可以使用离子事件来实现这一点，如此处所述。

事件

是一个发布-订阅风格的事件系统，用于发送和 响应应用中的应用程序级事件。

像这样修改代码：

外部服务网

import { Injectable } from '@angular/core';
import * as $ from 'jquery';
import { Events } from 'ionic-angular';
@Injectable()
export class ExternalServiceProvider {
constructor(public events: Events) { }
someEvent () {
this.events.publish('triggerClickEvent', "triggerClickEvent");
}
}

条目.ts

import { Events } from 'ionic-angular';
@Component({
selector: 'entry',
templateUrl: 'entry.html',
})
export class EntryComponent {
constructor(public events: Events) {
events.subscribe('triggerClickEvent', (data) => {
console.log('Event triggered' , data);
this.entryClicked();
});
}
id = "entry_1"
entryClicked () {
console.log(id +" has been clicked")
}
}