Cytoscape.js与Angular 5：节点点击事件中无法访问组件变量的问题

嘿，这个问题我太熟悉了！你遇到的核心问题是函数上下文的this指向不对——当你用普通function作为Cytoscape的点击回调时，函数内部的this会指向被点击的Cytoscape节点元素，而不是你的MainComponent实例，自然就访问不到test变量了。

下面给你三种靠谱的解决方案，按推荐程度排序：

1. 使用箭头函数（最推荐） #

箭头函数不会创建自己的this上下文，它会继承外层（也就是ngOnInit方法）的this，也就是你的组件实例。直接把回调改成箭头函数就行：

export class MainComponent implements OnInit {
  public test: string = '';
  private cy: any; // 建议给cy添加类型，比如cytoscape.Core

  constructor() {}

  ngOnInit() {
    this.cy = cytoscape({
      container: document.getElementById('cy'),
      layout: this.initializeLayout(),
      style: this.initializeStyles()
    });

    // 用箭头函数作为回调
    this.cy.on('click', 'node', (event) => {
      this.test = '点击节点后设置的值'; // 这里的this就是MainComponent实例了！
      console.log(this.test); // 现在能正常输出啦
    });
  }

  // 你的initializeLayout和initializeStyles方法...
}

2. 用bind()绑定上下文 #

如果你一定要用普通函数（比如需要用到函数的arguments或者其他特殊场景），可以用bind()把函数的this强制绑定为组件实例：

this.cy.on('click', 'node', function(event) {
  this.test = '点击节点后设置的值';
}.bind(this)); // 把组件的this绑定到这个函数里

3. 保存组件的this到变量 #

这是比较传统的写法，先把组件的this存到一个变量（比如that或者self）里，然后在回调里用这个变量访问组件属性：

ngOnInit() {
  const that = this; // 保存组件的this引用
  this.cy = cytoscape({...});

  this.cy.on('click', 'node', function(event) {
    that.test = '点击节点后设置的值'; // 用that代替this访问组件变量
  });
}

额外小提示 #

• 尽量给cy变量加上类型声明（比如private cy: cytoscape.Core;），这样IDE能给你更好的代码提示，也避免类型错误。
• 确保document.getElementById('cy')能正确获取到DOM元素——可以用Angular的ViewChild来获取，比直接用getElementById更符合Angular的规范：

  import { ViewChild, ElementRef } from '@angular/core';
  
  export class MainComponent implements OnInit {
    @ViewChild('cy') cyContainer!: ElementRef<HTMLElement>;
  
    ngOnInit() {
      this.cy = cytoscape({
        container: this.cyContainer.nativeElement, // 用ViewChild获取的元素
        // ...其他配置
      });
    }
  }
  

  对应的模板里要给容器加个模板引用：<div #cy></div>

内容的提问来源于stack exchange，提问作者Adrian