如何在 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定义在你要引用的组件中，你可以使用箭头函数保留上下文，直接在函数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
  }
};