如何在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
  }
};

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

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

variables

ztree

angular