Angular中如何在jsvectormap的onRegionClick外部访问变量值？

DevOps 小满

2026-8-22

解决方案：Angular中jsvectormap点击事件变量外部访问问题

问题核心是普通函数内的this指向不是Angular组件实例，导致你在onRegionClick里赋值的变量不属于组件，外部无法访问。以下是两种简单可行的解决方法：

方法1：使用箭头函数绑定组件`this`

箭头函数会继承外部作用域的this（也就是你的组件实例），直接修改组件类的属性即可：

先在组件类中声明要存储的变量：

export class AppComponent {
  selectedCountry: string | null = null; // 声明点击的国家代码变量
  map: any;

  ngOnInit() {
    this.initMap();
  }

  initMap() {
    this.map = new jsVectorMap({
      selector: '#world-map',
      map: 'world',
      // 用箭头函数定义点击事件
      onRegionClick: (event, code) => {
        this.selectedCountry = code; // 这里的this就是组件实例
        console.log('当前选中国家:', this.selectedCountry);
      }
    });
  }
}

现在在组件的其他方法或模板里，就能直接访问this.selectedCountry的值了，比如模板中可以这样显示：

<p>当前选中国家代码: {{ selectedCountry }}</p>

方法2：提前保存组件`this`引用

如果需要在普通函数里使用地图实例的this，可以先把组件的this存起来，再在事件函数中调用：

initMap() {
  const componentThis = this; // 保存组件实例的this
  this.map = new jsVectorMap({
    selector: '#world-map',
    map: 'world',
    onRegionClick: function(event, code) {
      // 用保存的componentThis访问组件属性
      componentThis.selectedCountry = code;
      console.log('当前选中国家:', componentThis.selectedCountry);
      // 这里的this指向地图实例，可用于操作地图
      console.log('地图实例:', this);
    }
  });
}