快捷導(dǎo)航

詳解angular2如何手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件

更新時(shí)間：2018年10月16日 11:33:38 作者：代碼日志

這篇文章主要介紹了詳解angular2如何手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

有沒有內(nè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)用戶點(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 與模板變量來獲取對(duì)文件輸入的引用,然后使用 Renderer 調(diào)用dispatchEvent來觸發(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訪問,所以也可以使用更簡(jiǎn)單的代碼

this.fileInput.nativeElement.click()

參見 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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS指令詳解及示例代碼
本文主要介紹AngularJS指令,這里整理了簡(jiǎn)單的指令并附示例代碼，有需要的小伙伴可以參考下
2016-08-08
Angular網(wǎng)絡(luò)請(qǐng)求的封裝方法
本篇文章主要介紹了Angular網(wǎng)絡(luò)請(qǐng)求的封裝方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對(duì)話框
在完成一個(gè)后臺(tái)管理系統(tǒng)時(shí)，需要用表格顯示注冊(cè)用戶的信息。但是用戶地址太長(zhǎng)了，不好顯示。所以想做一個(gè)模式對(duì)話框，點(diǎn)擊詳細(xì)地址按鈕時(shí)，彈出對(duì)話框，顯示地址。下面小編給大家分享下實(shí)現(xiàn)方法，一起看下吧
2016-08-08
angularJS開發(fā)注意事項(xiàng)
本篇文章給大家分享了angularJS開發(fā)注意事項(xiàng)以及相關(guān)知識(shí)點(diǎn)，對(duì)此有興趣的朋友參考學(xué)習(xí)下。
2018-05-05
angularjs實(shí)現(xiàn)多選框分段全選效果實(shí)現(xiàn)
這篇文章主要為大家介紹了angularjs實(shí)現(xiàn)多選框分段全選效果實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
詳解Angular動(dòng)態(tài)組件
本文主要介紹了Angular動(dòng)態(tài)組件，對(duì)此感興趣的同學(xué)，可以親自實(shí)驗(yàn)一下。
2021-05-05
Angular.js中處理頁面閃爍的方法詳解
我們?cè)趹?yīng)用的頁面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺不到區(qū)別；但也可能很長(zhǎng)，這樣會(huì)導(dǎo)致讓我們的用戶看到了沒有被渲染過的頁面。本文將介紹Angular.js中處理頁面閃爍的方法。
2017-03-03
Angular模版驅(qū)動(dòng)表單的使用總結(jié)
這篇文章主要介紹了Angular模版驅(qū)動(dòng)表單的使用總結(jié)，本文實(shí)現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定，校驗(yàn)，狀態(tài)管理，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-05-05
AngulaJS路由 ui-router 傳參實(shí)例
本篇文章主要介紹了AngulaJS路由 ui-router 傳參實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04
angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)IM聊天圖片發(fā)送實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-05-05