如何解决如何使用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()
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。