How to reference a variable of the component in a function not called in angular2/4?

Question

I am using ztree in my component, there is a function named addHoverDom(treeId, treeNode), it's defined in the component, but it doesn't get called in the way that angular usually does. Below is the function:

 addHoverDom(treeId, treeNode) {
    let aObj = $("#" + treeNode.tId + "_a");
    let addBtnId = "diy_add_" + treeNode.tId;
    let ztree = $.fn.zTree.getZTreeObj(treeId);
    if ($("#" + addBtnId).length == 0) {
      $("#" + addBtnId).bind("click", function() {
        //reference a variable of the component here
      });
    }
}

and this is how it called:

setting: Object = {
  callback: {
    onClick: this.zTreeOnClick
  },
  view: {
    addHoverDom: this.addHoverDom,
    removeHoverDom: this.removeHoverDom
  }
};

Now I want to get a variable of the component in the function, I tried the component name.prototype and renamed this to that, but neither worked, can anyone help? Thanks a lot.

Answer 1

Assume function addHoverDom is defined in the component where you want to refer to, you can use arrow function to keep the context and use this directly in function addHoverDom to refer component's field, refer below example:

addHoverDom(treeId, treeNode) {
  ...
  if ($("#" + addBtnId).length == 0) {
    $("#" + addBtnId).bind("click", () => {       // use arrow function to keep context
      //reference a variable of the component here
      // example code
      this.variable_name = 'test';
      const test = this.variable_name;      
    });
  }
}

Also you may need to keep context for callback of addHoverDom

setting: Object = {
  callback: {
    onClick: this.zTreeOnClick
  },
  view: {
    addHoverDom: this.addHoverDom.bind(this),     // bind this to keep the context
    removeHoverDom: this.removeHoverDom
  }
};