Могу ли я остановить событие от кнопки компонента внешнего модуля, чтобы это произошло в Angular (5)?

Question

Я импортирую компонент из внешнего модуля, у которого есть кнопка.

При нажатии кнопки это делает console.log('test');, поэтому в моей консоли отображается 'test'.

Это внешний модуль, поэтому я не могу получить доступ к коду этого компонента. Однако я знаю идентификатор элемента кнопки. id='idtest'.

Я бы хотел открыть модал подтверждения, когда я нажимаю на эту кнопку и выполняю console.log('test'), только если я нажму на кнопку «ОК» и если я не подтверждаю, событие не произойдет.

Любое решение, чистое JS или угловое приветствуются.

Когда-либо пытались получить элемент по id, добавить onclick и eventlistener и вызвать event.stopPropagation ()

Answer 1

Вы можете использовать селектор запросов для удержания кнопки и добавления прослушивателя для события щелчка.

document.querySelector('#idtest').addEventListener('click', function(){})

Answer 2

Я бы предложил использовать @ViewChild, а затем что-то вроде этого ...

template: "<app-component #component></app-component>"

@ViewChild('component') public component: any

this.component.event.stopPropagation();

Поскольку я не знаю, как выглядит этот внешний компонент, я не могу предложить вам лучшее решение.

РЕДАКТИРОВАТЬ: Тем не менее, во многих случаях это может привести к некоторым неприятным ошибкам консоли, и я не рекомендовал бы использовать это. Там редко бывает причина, чтобы остановить компонент от создания события. Если компонент не соответствует вашим потребностям, вы должны вместо этого использовать что-то другое.

Answer 3

Вы можете редактировать css, отображая ни одну из этих кнопок, кроме как добавив еще одну. Теперь вы можете написать диалоговое окно для этого события нажатия кнопки. Если диалог завершается с помощью Да, выполнить событие нажатия кнопки

$("#yourhiddenbutton).click()