在Anchor Element上设置（单击）属性

Question

据我所知，使用Angular 2+中的Renderer2动态添加'（click）'属性是不可能的。

如果这是真的，当你在组件中动态创建HTML或你使用什么解决方法时，你如何可爱的人添加'（点击）'属性？

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

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

Answer 1

（click）不是属性，你不能像这样使用它。 你可以使用.addEventListener 例如 element.addEventListener（'click'，function（）{do something}）;

如果你想要完整的角度例子： HTML

<button #mybtn>my Button</button>

TS

 @ViewChild('mybtn') myBtn:ElementRef;
    ngOnInit() {
      this.myBtn.nativeElement.addEventListener('click', function() {
       console.log('from there');
      })
    }

Answer 2

您可以使用Renderer2添加属性和事件侦听器。我认为最好使用Renderer2，因为它就像一个包装器，并提取DOM操作如何在引擎盖下工作。

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

Here is a working example