小編給大家分享一下angular2怎么手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
十余年專注成都網(wǎng)站制作,成都定制網(wǎng)站,個(gè)人網(wǎng)站制作服務(wù),為大家分享網(wǎng)站制作知識(shí)、方案,網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于成都定制網(wǎng)站,高端網(wǎng)頁(yè)制作,對(duì)成都發(fā)電機(jī)維修等多個(gè)方面,擁有豐富的營(yíng)銷推廣經(jīng)驗(yàn)。我試圖在元素上編程點(diǎn)擊點(diǎn)擊事件(或任何其他事件),換句話說(shuō),我想知道在angular2中由jQuery .trigger()方法提供的類似功能.
有沒(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)用戶點(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()
看完了這篇文章,相信你對(duì)“angular2怎么手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!
標(biāo)題名稱:angular2怎么手動(dòng)點(diǎn)擊特定元素上的點(diǎn)擊事件-創(chuàng)新互聯(lián)
瀏覽地址:http://muchs.cn/article44/dgidee.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、網(wǎng)站維護(hù)、用戶體驗(yàn)、動(dòng)態(tài)網(wǎng)站、網(wǎng)站排名、移動(dòng)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容