事件处理程序调用两次（角度）

Question

我目前正在使用角度数据表进行开发https://l-lin.github.io/angular-datatables/#/welcome

在我构建的页面中，它有用于添加新记录的按钮（导航到表单组件），在数据表中，它在每一行都有用于编辑和删除的操作按钮（导航到表单组件（用于添加新记录的相同组件）记录））

新增记录功能：

addNew():void{
        this._router.navigate(['../employee_termination_request_form/add/new'],{ relativeTo: this.route });
    }

具有操作按钮的列：

{
    data: null,
    width:'10px',
    render: function (data, type, row) {
        return `
        <div class="dropdown">
        <button class="btn btn-inline-table dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="glyphicon glyphicon-option-vertical"></i>
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="top:-10px; left:-125px">
        <span class="dropdown-item editBtnTransactTerminationRequest">Edit</span>
        <span class="dropdown-item deleteBtnTransactTerminationRequest">Delete</span>
        </div>
        </div>
        `;
    }
}

在 OnNgInit 中，我为操作按钮添加了处理程序：

$(document).one('click', '.editBtnTransactTerminationRequest', ($event) => {
    this.editData();
});

当用户点击编辑按钮时，editData 函数将重定向到表单组件。

editData():void { console.log(this.selectedData)
        if(this.toEdit=="1"){
            if(this.selectedData.requeststatus=="DRAFT")
                this.zone.run(()=>this._router.navigate(['../employee_termination_request_form/edit/'+this.selectedData.employeeid],{ relativeTo: this.route }));
            else{
                this.zone.run(()=>this.dialog.open(AlertDialog,{
                    data:{
                        dialogtitle:'Alert',
                        dialogcontent:'Request has been submitted and can not be edited!'
                    }
                }));
                $(document).one('click', '.editBtnTransactTerminationRequest', ($event) => {
                    this.editData();
                });
            }
        }else{
            this.zone.run(()=>this.dialog.open(AlertDialog,{
                data:{
                    dialogtitle:'Unauthorized Access',
                    dialogcontent:'You are not authorized to access this menu!'
                }
            }));
            $(document).one('click', '.editBtnTransactTerminationRequest', ($event) => {
                this.editData();
            });
        }
}

现在问题来了，当用户单击添加按钮时，页面将加载表单页面，当他们返回并单击编辑按钮时。编辑按钮的处理程序将被调用两次。当我用 console.log 跟踪它时，第一个 selectedData 是空的（该值取决于在 ngoninit 中初始化的内容），第二个是我选择的行的值（正确的行）。谁能帮我解决这个问题？

Answer 1

通过取消绑定 ngOnDestroy 中的处理程序找到了解决我的问题的方法。

ngOnDestroy(){
    $(document).off('click', '.editBtnTransactTerminationRequest');
}