如何在输入类型=“文件”时触发事件点击通过函数角2？ [英] how to trigger event click at input type="file" by function in angular 2?

问题描述

 < input #fileInput type =file/> 
  

demo.ts

  import {
 Component，
 Inject，
 OnInit，
 ElementRef，
渲染器，
 ViewQuery 
} from'@ angular / core'; 
 @Component（{
 selector：'demo'，
 templateUrl：'client / dev / demo / demo.html'，
}）
 export class DemoComponent implements OnInit {
 
 @ViewQuery（'fileInput'）fileInput：ElementRef; 
 
构造函数（）{} 
 
 triggerFile（）{
 //做某事
 //触发输入类型=文件
 this.fileInput.nativeElement.click（）; 
 
 
 ngOnInit（）{
 
 
} 
 
} 
  

我看到这个答案：如何触发从角度2按钮点击输入文件的点击事件？
当然，它的工作。但我想在triggerFile（）函数中触发input type =file，并使用ViewQuery和nativeElement.click（）函数。但它控制此错误无法读取未定义的属性nativeElement。我使用angular2 Rc 1。感谢您的帮助。

解决方案将 fileInput 引用传递给 triggerFile（），然后执行 fileInput.click（）：

 < input #fileInput type =file/> 
< button type =button（click）=triggerFile（fileInput）>触发< / button> 
  

  triggerFile（fileInput：元素）{
 //做某事
 fileInput.click（）; 
} 
  

I have this code in Html file .

<input #fileInput type="file"  />

demo.ts

import {
  Component,
  Inject,
  OnInit,
  ElementRef,
  Renderer,
  ViewQuery
} from '@angular/core';
@Component({
  selector: 'demo',
  templateUrl: 'client/dev/demo/demo.html',
})
export class DemoComponent implements OnInit{

@ViewQuery('fileInput') fileInput:ElementRef;

constructor(){}

triggerFile(){
   // do something 
   // trigger input type="file" here
   this.fileInput.nativeElement.click();
}

ngOnInit() {


}

}

I see this answer : how to trigger click event of input file from button click in angular 2? Of course it worked . But I want to trigger input type="file" in triggerFile() function and I use ViewQuery and nativeElement.click() function . but it console this error "Cannot read property 'nativeElement' of undefined" . I use angular2 Rc 1 . thank for help .

解决方案

Pass the fileInput reference to triggerFile() and do the fileInput.click() there instead:

<input #fileInput type="file"  />
<button type="button" (click)="triggerFile(fileInput)">trigger</button>

triggerFile(fileInput:Element) {
  // do something
  fileInput.click();
}

这篇关于如何在输入类型=“文件”时触发事件点击通过函数角2？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！