詳解angular2如何手動點(diǎn)擊特定元素上的點(diǎn)擊事件
我試圖在元素上編程點(diǎn)擊點(diǎn)擊事件(或任何其他事件),換句話說,我想知道在angular2中由jQuery .trigger()方法提供的類似功能.
有沒有內(nèi)置的方法來做到這一點(diǎn)？ …..如果不是,請建議我該怎么做
考慮以下代碼片段
<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 與模板變量來獲取對文件輸入的引用,然后使用 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訪問,所以也可以使用更簡單的代碼
this.fileInput.nativeElement.click()
參見 https://developer.mozilla.org/de/docs/Web/API/EventTarget/dispatchEvent
代碼日志版權(quán)聲明：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS實(shí)現(xiàn)動態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動態(tài)編譯添加到dom中的方法,結(jié)合實(shí)例形式分析了AngularJS動態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
Angular 2應(yīng)用的8個主要構(gòu)造塊有哪些
這篇文章主要為大家詳細(xì)介紹了Angular 2應(yīng)用的8個主要構(gòu)造塊,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面(推薦)
這篇文章主要介紹了Angular4.x通過路由守衛(wèi)進(jìn)行路由重定向，實(shí)現(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁面,這個功能在網(wǎng)上商城項(xiàng)目上經(jīng)常會用到，下面小編給大家?guī)砹私鉀Q方法一起看看吧2018-05-05
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了淺析AngularJS中的生命周期和延遲處理,是AngularJS中較為核心的深層次內(nèi)容,需要的朋友可以參考下2015-06-06
從源碼看angular/material2 中 dialog模塊的實(shí)現(xiàn)方法
這篇文章主要介紹了 從源碼看angular/material2 中 dialog模塊的實(shí)現(xiàn)方法,需要的朋友可以參考下2017-10-10
將angular.js項(xiàng)目整合到.net mvc中的方法詳解
這篇文章主要給大家介紹了將angular.js項(xiàng)目整合到.net mvc中的相關(guān)資料，文中通過示例代碼將實(shí)現(xiàn)的過程介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。2017-06-06
ng2學(xué)習(xí)筆記之bootstrap中的component使用教程
現(xiàn)在angular2已經(jīng)除了集成的angular-cli，建議大家可以基于這個來快速開發(fā)ng2的項(xiàng)目，不用自己再搭建環(huán)境。接下來通過本文給大家介紹 bootstrap中的component使用教程,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Angular 常用指令實(shí)例總結(jié)整理的相關(guān)資料,本文整理了常用指令，大家可以參考使用，需要的朋友可以參考下2016-12-12
詳解在Angular項(xiàng)目中添加插件ng-bootstrap
這篇文章主要介紹了詳解在 Angular 項(xiàng)目中添加插件 ng-bootstrap，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07