angular - 在锚元素上设置（单击）属性

Question

据我了解，在 Angular 2+ 中使用 Renderer2 将“（单击）”属性动态添加到 DOM 元素是不可能的。

如果这是真的，那么可爱的人们如何在组件中动态创建 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);

这是一个工作示例