角文件输入更改事件根本不发射

Question

是否有人使用了具有Angular的文件输入。当声明为（更改）时，我无法将更改事件发射，但是当使用Onchange时，它可以使用，但不能使用Angular方法。有人成功使用过（变更）事件吗？不知道我在这里缺少什么。

这有效...

<input hidden mat-input onclick="this.value = null" onchange=”alert(‘works’)” #fileInput type="file">

这不起作用...

<input hidden mat-input onclick="this.value = null" (change)=”alert(‘works’)”  #fileInput type="file">

Answer 1

<input mat-input (change)="onChange()" #fileInput type="file" />

Answer 2

//app.component.html

<div>
   <label for="file">file</label>
   <input hidden id="file" #file name="file" type="file" (change)="onFileSelected($event)">
</div>


//app.component.ts

onFileSelected(event){
  const file = event.target.files[0];
  //do what you want with the event
}

Answer 3

您无法访问模板中的全局方法。要解决此问题，您可以添加链接到窗口对象的属性：

@Component({...})
export class AppComponent {
    window = window;
}

并从模板调用它：
＆lt; input（change）=“ window.alert（'test'）” type =“ file”＆gt;

另一种方法是在组件方法中使用全局方法：

@Component({...})
export class AppComponent {
    testMethod(text) {
        alert(text)
    }
}

html：html：＆lt; input （更改）=“​​ testMethod（'test'）” type =“ file”＆gt;

note ：另外，请使用正确的报价标记：“''''' ，不是：“''”