繁体   English   中英

订阅无法触发子组件的文件输入上的click()

Triggering a click() on a child component's file input won't work from a subscription

提示:本站收集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所示)。 但是从订阅中调用时,文件输入似乎不愿意打开自己。

有什么想法吗? 提前致谢...

1 个回复

出于安全原因,在现代浏览器中不可能以编程方式在文件输入上调用click事件- 除非它在用户交互期间发生。 否则,网站和广告可能会通过文件对话框向用户发送垃圾邮件,而无需他们与页面进行交互,例如让他们在不知不觉中上传文件。

使用Observable的问题在于,如果它是异步的(即,使用async调度程序时),则您将离开用户交互上下文,并且浏览器将不会打开文件对话框。

您只能通过使Observable同步(实际上,几乎所有预设的Observable都是同步的)来解决此问题。 如果您有一个HTTP请求,那么这将是不可能的,您必须寻找其他方法来打开文件对话框 (尽管我不确定其中任何一个是否可以在您的设置中使用)。

这是一个与您的问题类似的GitHub问题 ,并带有解释:

因此,[由于异步],从Chrome的角度来看,click()调用不是由用户事件触发的,因此被忽略。

3 子组件将无法从函数中呈现

我正在尝试使用函数renderHowManyAlcohol()渲染子组件 组件LYDSelectNumber无法渲染,正确的道具正在传递,为什么不渲染? render() { return ( &lt;Flexible&gt; &lt;LYDSce ...

4 Thunk 不会从子组件分派

我不经常发帖,但我已经搜索了一整天,这个让我感到困惑。 我有一个 Redux 连接组件“主页”,它被 React Router 加载为索引。 在“主页”中,我有子组件“EventCreate”,它连接到同一个 Redux 存储。 然后我有一个 Thunk,它使用 Async Axios 来查询 ...

8 单击时触发另一个组件上的状态更改将不起作用

我设置了一个单击功能,该功能应该触发位于其他文件中的单独组件中的状态更改。 我的splash.js文件包含Splash组件,该组件具有一个徽标,单击该徽标时,它会从登录页面(Splash)更改为我的主页。 这是splash.js : 单击功能应更改App.js文件中splash的状态 ...

9 JQuery的.click触发子元素

我有一个像这样的倍数div的页面 我试图让每个div在点击时打开它里面的链接并尝试这样: 但是当点击实际链接时,它会打开两次。 点击我div中的链接时,有没有.click触发器的建议? ...

2012-01-17 23:58:10 5 1307   jquery
10 订阅代码无法使用…还是我的帐户

目前正在为我的网站创建一个订阅系统,据我所知一切正确,但是...当我登录沙盒Paypal时遇到错误。 如果我将“业务”值更改为其他人(我在教程中找到),那么我的代码可以完美运行。 这是我的代码,不起作用..... 这是起作用的代码... 有任何想法吗? 是我的代码还是需 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM