angular - 如何使用 Renderer2 在 Angular 中使用 DOM click()

Question

我有一个基于特定用户操作调用的方法。在那种方法中，我尝试使用这种方法下载文件。

但我不想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

Answer 1

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

方法一

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

方法二

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

我记得不鼓励将第二种方法与 Render 结合使用。但现在情况不再如此

方法三

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

自动发送点击事件

1)

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

就像@MikeOne 在评论中所写

link.click()