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

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(){ 做某事} );

如果你想要完整的 angular 示例：
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

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

Setting (click) Attribute on Anchor Element

renderer

angular

elementref