Как использовать DOM click() в Angular с помощью Renderer2

У меня есть метод, который вызывается на основе определенных действий пользователя. В этом методе я пытаюсь загрузить файл, используя этот подход.

Но я не хочу использовать/ссылаться на объект 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);

Мне нужна помощь, чтобы понять, как здесь вызвать метод DOM click(), используя Renderer2 и ElementRef


person Kinley Christian    schedule 13.09.2020    source источник
comment
Отвечает ли это на ваш вопрос? Открытие файла PDF в новой вкладке angular 4?   -  person mbojko    schedule 13.09.2020
comment
Почему здесь не работает link.click()?   -  person MikeOne    schedule 13.09.2020


Ответы (1)


Насколько я знаю, существует два метода регистрации события в элементе 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, 'click', (event) => {
   console.log('Clicked')
})

Отправлять событие клика автоматически

1)

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

Как @MikeOne написал в комментариях

link.click()
person profanis    schedule 13.09.2020
comment
Я думаю, что выше два решения работают, когда пользователь вручную щелкает элемент. Я хочу, чтобы click() происходил автоматически. - person Kinley Christian; 13.09.2020
comment
@KinleyChristian Я обновил свой ответ. Кажется, что не совсем ясно, чего вы пытаетесь достичь. link.click() это делает свое дело. Что мешает вам его использовать? - person profanis; 13.09.2020