我試圖在元素上編程點(diǎn)擊點(diǎn)擊事件(或任何其他事件),換句話說(shuō),我想知道在angular2中由jQuery .trigger()方法提供的類(lèi)似功能.

有沒(méi)有內(nèi)置的方法來(lái)做到這一點(diǎn)？ …..如果不是,請(qǐng)建議我該怎么做

考慮以下代碼片段

<form [ngFormModel]="imgUploadFrm"     (ngSubmit)="onSubmit(imgUploadFrm)">    <br>    <div class="input-field">      <input type="file" id="imgFile" (click)="onChange($event)" >    </div>    <button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button> </form>

這里當(dāng)用戶(hù)點(diǎn)擊btnAdd它應(yīng)該觸發(fā)imgFile上的點(diǎn)擊事件

Angular4

代替

this.renderer.invokeElementMethod(    this.fileInput.nativeElement, 'dispatchEvent', [event]);

使用

this.fileInput.nativeElement.dispatchEvent(event);

因?yàn)閕nvokeElementMethod不再是渲染器的一部分.

Angular2

使用 ViewChild 與模板變量來(lái)獲取對(duì)文件輸入的引用,然后使用 Renderer 調(diào)用dispatchEvent來(lái)觸發(fā)事件：

import { Component, Renderer, ElementRef } from '@angular/core';@Component({ ... template: `...<input #fileInput type="file" id="imgFile" (click)="onChange($event)" >...`})class MyComponent { @ViewChild('fileInput') fileInput:ElementRef; constructor(private renderer:Renderer) {} showImageBrowseDlg() {  // from http://stackoverflow.com/a/32010791/217408  let event = new MouseEvent('click', {bubbles: true});  this.renderer.invokeElementMethod(    this.fileInput.nativeElement, 'dispatchEvent', [event]); }}

更新

由于Angular團(tuán)隊(duì)不再勸阻直接的DOM訪問(wèn),所以也可以使用更簡(jiǎn)單的代碼

this.fileInput.nativeElement.click()

參見(jiàn) https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent

代碼日志版權(quán)聲明：

翻譯自：http://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長(zhǎng)站。