用jquery编程触发ionic3元素的单击事件

Question

我试图从jquery或本机dom事件手动触发元素的(离子型)单击事件。

例如，我有以下内容：

entry.html

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

entry.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组件的函数。

externalService.ts

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()，同样的问题。

但是，如果我单击页面中的元素，它就会正确地触发。

无论是否使用jquery，如何从DOM激发原始的离子单击事件？

Answer 1

我认为您可以使用Ionic事件来实现这一点，正如所描述的这里。

Events是一个发布-订阅样式的事件系统，用于在应用程序中发送和响应应用程序级别的事件。

修改代码如下：

externalService.ts

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

entry.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")
  }
}