如何使用Renderer2在Angular中使用DOM click

问题描述

我有一个基于某些用户操作被调用的方法。在这种方法中，我尝试使用this approach下载文件。

但是我不想直接使用/引用document对象，因此我正在使用Renderer2和ElementRef的组合。这是代码的快照：

const link = this.renderer.createElement('a');
this.renderer.setAttribute(link,'download',requiredFile.name);
this.renderer.setAttribute(link,'href',requiredFile.url);
this.renderer.setAttribute(link,'target','_blank');
this.renderer.appendChild(this.elementRef.nativeElement,link);
// how to achieve link.click() here?
this.renderer.removeChild(this.elementRef.nativeElement,link);

我需要一些帮助来弄清楚如何使用click()和Renderer2来调用DOM ElementRef方法

解决方法

AFAIK有两种方法可以在DOM元素上注册事件。第一个使用香草JavaScript，第二个使用rxjs运算符。

方法1

fromEvent(link,'click',() => console.log('do something here')).subscribe() // don't forget to unsubscribe

方法2

link.addEventListener('click',() => console.log('clicked 2'))

我记得不建议将第二种方法与Render结合使用。情况不再如此

方法3

this.renderer.listen(this.elementRef.nativeElement,(event) => {
   console.log('Clicked')
})

自动发送点击事件

1）

const clickEvent = new Event('click')
this.elementRef.nativeElement.dispatchEvent(clickEvent)

就像@MikeOne在评论中写道

link.click()

angular angular angular-renderer2