angular - 事件绑定(bind) Angular 2

Question

我想用这个“tmp”绑定(bind)事件，但它也与以前存在的按钮相关联，为什么？

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));
    }

Answer 1

这可以使用 Renderer2 实现，如下所示，

向组件注入(inject) Renderer2 服务

constructor(private renderer: Renderer2){}

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

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

回调函数将在事件触发时执行。

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

注意:listen 的方法定义refer docs了解更多信息

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

LIVE DEMO