Javascript 角度2读取输入文件

我试图了解如何使用输入文件与Angular 2。在下面的示例中，我希望我的控制台记录我上传的文件的名称。不幸的是，此代码发送错误

无法读取未定义的属性“target”

Mycomponent.html

<input 
   id="imageUpload" 
   type="file" 
   (change)="imageRun(input)"/>

我不确定是否有一个角度特定的解决方案来解决这个问题，因为我在使用纯javascript进行此操作时遇到了相同的问题。我看过一些简单的JS教程，它们都让我在JS中使用

addEventListener

方法，而不是在HTML中指定这些触发器。但据我所知，这些方法并不真正适用于Angular 2项目

---

作为参考，这里介绍了在普通JavaScript中执行几乎相同的操作，并在src脚本中使用addEventListener

您可以在inbit file元素上定义本地模板变量，并在组件中使用它

<Input #myInput
   id="imageUpload" 
   type="file" 
   (change)="imageRun(myInput)"/>

imageRun(input){
    var file = myInput.files[0];
    console.log(file.name);
}

imageRun（输入）{
var file=myInput.files[0]；
console.log（文件名）；
}

执行第一个操作会导致

无法读取未定义的属性“srcement”

。我们将研究第二个问题。

<Input #myInput
   id="imageUpload" 
   type="file" 
   (change)="imageRun(myInput)"/>

imageRun(input){
    var file = myInput.files[0];
    console.log(file.name);
}