提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
考虑模板包含文件输入的组件。 可以通过调用公共的open()方法来打开输入，该方法触发对输入的nativeElement的单击。
@Component({
selector: 'child',
template: '<input type="file" #input/>',
})
export class ChildComponent {
@ViewChild('input')
public input: ElementRef;
public open(): void {
console.log('OPENING THE FILE INPUT');
this.input.nativeElement.click();
}
}
在ParentCompenent中调用此ChildComponent ，它在多个上下文中调用ChildComponent.open() ，如下所示：
@Component({
selector: 'parent',
template: '<child></child>',
})
export class ParentComponent {
@ViewChild(ChildComponent)
public child: ChildComponent;
constructor( private parentService: ParentService ) {
}
public openChildInput(): void {
// This works.
// Output:
// OPENING THE FILE INPUT
// The file input opens
this.child.open();
}
public waitAndOpenChildInput(): void {
parentService.wait()
.subscribe( () => {
// This does not work.
// Output:
// "OPENING THE FILE INPUT"
// The file input DOES NOT open...
this.child.open();
})
}
}
在这两种情况下，调用open()方法似乎都可以工作（如console.log所示）。 但是从订阅中调用时，文件输入似乎不愿意打开自己。
有什么想法吗？ 提前致谢...
出于安全原因，在现代浏览器中不可能以编程方式在文件输入上调用click事件- 除非它在用户交互期间发生。 否则，网站和广告可能会通过文件对话框向用户发送垃圾邮件，而无需他们与页面进行交互，例如让他们在不知不觉中上传文件。
使用Observable的问题在于，如果它是异步的（即，使用async调度程序时），则您将离开用户交互上下文，并且浏览器将不会打开文件对话框。
您只能通过使Observable同步（实际上，几乎所有预设的Observable都是同步的）来解决此问题。 如果您有一个HTTP请求，那么这将是不可能的，您必须寻找其他方法来打开文件对话框 （尽管我不确定其中任何一个是否可以在您的设置中使用）。
因此，[由于异步]，从Chrome的角度来看，click（）调用不是由用户事件触发的，因此被忽略。
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.