克隆按钮节点没有单击事件

Question

我正在尝试克隆按钮，而我能够克隆按钮，但由于某种原因，克隆的按钮没有单击功能。

app.component.html ：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <input type="button" (click)="CloneButton($event)" value="Clone">
        </div>
        <div class="col-md-6" #cloned></div>
    </div>
</div>

app.component.ts ：

@ViewChild('cloned') cloned:ElementRef;
cloneCounter = 0;

CloneButton(event:any) {
    let newbutton = event.target.cloneNode();
    newbutton.value += this.cloneCounter++;
    this.cloned.nativeElement.appendChild(newbutton);
}

即使我在CloneButton()附加了javascript事件监听器，它也无法访问cloneCounter变量

newbutton.addEventListener('click', this.jsclicked,false)

jsclicked() {
    console.log('jsclicked');
    console.log(this.cloneCounter); //will be undefined.
}

如何克隆按钮，以便它仍具有可用的点击功能？