Question

我试图从jquery或native 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 click事件无关。如果我使用$("#entry_1")[0].click()，也会出现同样的问题但是，如果我单击页面中的元素，它将正常触发。

如何使用或不使用jquery从DOM中激活原始离子点击事件？

Answer 1

我认为您可以按照here所述使用Ionic Events来实现这一点。

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

使用jquery

1 个答案: