如何在没有在angular2/4中调用的函数中引用组件的变量？

Question

我在组件中使用ztree，有一个名为addHoverDom(treeId, treeNode)的函数，它是在组件中定义的，但是它不会像通常那样被调用。职能如下：

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

它是这样命名的：

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

现在我想在函数中获得组件的一个变量，我尝试了组件name.prototype并将它重命名为该变量，但是没有人能帮上忙吗？非常感谢。

Answer 1

假设函数addHoverDom是在要引用的组件中定义的，您可以使用箭头函数来保持上下文，并在函数addHoverDom中直接使用this引用组件的字段，参见下面的示例：

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

此外，您可能需要为addHoverDom的回调保留上下文

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