multiple angular datatable components has some problem when use column click event

• angular version:Angular 4.3
• angular-datatables version:4.2.0

What’s the problem?

Hi , i have a problem when i have multiple angular components which use datatable and add row click event. For example:A component has a event handler name aHander() , and B component has a event handler named bHander(), when i start A component and click the row will trigger aHander(), but when i navigate the router to B component and click the row button ,it will trigger the aHandler() not bHandler() !!!, so can you help me solve this problem, in my project has many components which use datatable and have CURD buttons to trigger different handlers. Thanks

Can you share your code?

Here is datatable extention column definition:

{
        "data":null,
        "title":"Option",
        "searchable":false,
        "orderable":false,
        "width":'15%',
        "render":function(data, type, row, meta){
            let html = '<div class="btn-group btn-overlap btn-corner">'+
                                '<a class="btn btn-info btn-sm edit" title="Edit">'+
                                    '<i class="fa fa-pencil"></i>'+
                                 '</a>&nbsp;'+
                               '<a class="btn btn-danger btn-sm delete title="Delete">'+
                                    '<i class="fa fa-trash-o"></i>'+
                               '</a>&nbsp;'+
                           '</div>';
            return html;
        }
    }

and follow code define the edit、delete button trigger event:

this.dtOptions["createdRow"] =(row, data, dataIndex) =>{
            const self = this;
            let editDom:any = $(row).find(".edit");
            editDom.unbind('click');
            editDom.bind('click', () => {
                self.updateAction(data);
                
              });
            
            let deleteDom = $(row).find(".delete");
            deleteDom.unbind('click');
            deleteDom.bind('click', () => {
                self.deleteAction(data);
              });
        }

i have many angular components like this, but when i use angular route navigate to another component, it will triggers a same handler method in a component which first run all the time , so please help me …

[l-lin]

In your example, when clicking on “Edit” of component B, it will call self.updateAction(data); with the data of component A? Are you certain your dtOptions are isolated and not shared between your components?

[posly66]

@l-lin With your reminding, I solved this problem! Thank you very much! The problem is that need a isolated dtOptions！

Because I have many components need to use datatable, so I put dtOption as a common public part named datatableConf, each component needs to export datatableConf firstly, then define let dtOption = datatableConf and add some column options to the dtOption .

In the final analysis, the main reason is that i don’t fully understand the characteristics of TypeScript or ES6.