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

（点击）不是属性，因此不能这样使用。
您可以使用.addEventListener
例如
element.addEventListener（'click'，function（）{做某事}）;

如果您想要完整的角度示例：
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

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

2 个答案: