angular - 如何在 angular2/4 中未调用的函数中引用组件的变量？

Question

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

 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定义在要引用的组件中，您可以使用箭头函数保留上下文并this直接在函数中使用addHoverDom来引用组件的字段，请参考以下示例：

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