Установка (щелчок) атрибута на якорном элементе

Насколько я понимаю, невозможно динамически добавить атрибут «(щелчок)» к элементу DOM с помощью Renderer2 в Angular 2+.

Если это правда, как вы, милые люди, добавляете атрибут «(щелчок)», когда они динамически создают HTML в компоненте, или какой обходной путь вы используете?

 const element = this.renderer.createElement('a');

 element.setAttribute('href', 'foobar');     // This works
 element.setAttribute('(click)', 'foobar');  // This does not work

angular renderer elementref
person Mike Poole    schedule 19.02.2019    source источник
comment
Почему бы вам не использовать this.renderer.setAttribute? Вы можете использовать this.renderer.listen для этого.   -  person Ivan    schedule 19.02.2019
comment
Если вы используете element.setAttribute, то это должно быть onclick, а не (click). И правильный способ - использовать renderer.setAttribute, как указано @Lends   -  person amedina    schedule 19.02.2019
comment
(click) в любом случае не является допустимым именем атрибута   -  person Ivan    schedule 19.02.2019

Ответы (2)


arrow_upward
2
arrow_downward

(click) не является атрибутом, и вы не можете использовать его таким образом.
вы можете использовать .addEventListener
например
element.addEventListener('click', function(){ do something} );



если вам нужен полный пример angular:
HTML 

<button #mybtn>my Button</button>

ТС 

 @ViewChild('mybtn') myBtn:ElementRef;
    ngOnInit() {
      this.myBtn.nativeElement.addEventListener('click', function() {
       console.log('from there');
      })
    }
person Yahya Essam    schedule 19.02.2019
comment
Большое спасибо за это @Yahya Essam, это навело меня на правильный путь. - person Mike Poole; 28.02.2019

arrow_upward
1
arrow_downward

Вы можете использовать Renderer2 для добавления атрибутов и прослушивателей событий. Я думаю, что лучше использовать Renderer2, так как он действует как оболочка и абстрагирует то, как манипуляции с DOM работают под капотом.

 const element = this.renderer.createElement('a');
 this.renderer.setAttribute(element, 'href', 'foobar');
 this.renderer.listen(element, 'click', this.myMethod);

Вот рабочий пример

person John    schedule 26.06.2019