Angular 2 中的事件绑定

Question

我想将事件绑定到这个“tmp”，但是它也会附加到先前存在的按钮上，为什么？

constructor(private renderer :Renderer ,private element : ElementRef){
        }
    private appender(){
        var tmp  = this.renderer.createElement(this.element.nativeElement,'button');
        this.renderer.listen(tmp, 'click', ( event:Event ) => console.log(event));
    }

- mukund patel

---

你是什么意思，指的是 this "tmp"？ - Max Koretskyi

代码不足，请尽可能多地放置代码以获得帮助。 - Vamshi

"this" 指的是在 Angular 2 中编写的组件。 - mukund patel

“this” 指的是在 Angular 2 中编写的组件，当按钮被点击时会调用函数 appender。 - mukund patel

你也应该提供更大的背景，并且说明你要实现什么目标。看起来你正在以编程方式创建一个DOM元素，而这通常是不好的做法。DOM应该从组件的模板中生成。 - JB Nizet

Answer 1

这可以通过以下使用Renderer2实现，

向组件注入Renderer2服务。

constructor(private renderer: Renderer2){}

使用listen方法注册事件监听器。

this.renderer.listen('body', 'click',this.calback)

当事件被触发时，回调函数将会被执行。

calback(event){
  console.log(event)
}

注意：请参阅文档以获取有关listen方法定义的更多信息。

listen(target: 'window'|'document'|'body'|any, eventName: string, callback: (event: any)

活动演示

- Aravind