Angular 打字稿 JavaScript 第三方嵌套函数中的词典范围丢失 API 事件处理程序

Question

我正在尝试处理来自第三方 API (ESRI ArcGIS JavaScript API 4.7) 的事件。当我尝试使用事件处理程序回调处理来自 ArcGIS API 的事件时，我正在努力控制加载 API 的 Angular 组件中的范围上下文。单击地图以引发错误。我觉得必须有一种方法可以通过控制上下文来实现这一点，但我一直没能做到。闭包不是我的强项。任何帮助都会很棒。

https://stackblitz.com/edit/angular6-arcgis-api-5yfayy?file=src%2Fapp%2Fcomponents%2Fmap.component.ts

 ngOnInit() {
    this.arcgisService.loaded$.subscribe(loaded => {
      console.log("map loaded subscription");
      if(loaded) {
        this.arcgisService.constructMap({basemap: this.basemap, elevation: true}).then(map => {
          this.arcgisService.constructMapView(
            { 
            map: map,
            container: this.id,
            center: [-117.18, 34.06],
            zoom: 15
            }
            ).then(mapView => {
              console.log("constructMap.then");
              console.log(this); 
              this.mapView = mapView;
              mapView.on("click", function(event) {
                 //this.test = event.x
                 this.onMapClick(event.x)
                  console.log("click event: ", event.x);
                });
              })
        })//end construct map
      }
    })
  }

onMapClick(x){
  console.log(x)
}

Answer 1

函数语句创建的每个新函数，都根据函数的调用方式定义了自己的 this 值。所以使用箭头函数将引用当前对象

试试这个

ngOnInit() {
    this.arcgisService.loaded$.subscribe(loaded => {
      console.log("map loaded subscription");
      if(loaded) {
        this.arcgisService.constructMap({basemap: this.basemap, elevation: true}).then(map => {
          this.arcgisService.constructMapView(
            { 
            map: map, 
            container: this.id,
            center: [-117.18, 34.06],
            zoom: 15
            }
            ).then(mapView => {
              console.log("constructMap.then");
              console.log(this); 
              this.mapView = mapView;
              //Use arrow function here to refer current object
              mapView.on("click", (event) => {
                 //this.test = event.x
                 this.onMapClick(event.x)
                  console.log("click event: ", event.x);
                });
              })
        })//end construct map
      }
    })
  }

Forked Example

Angular 打字稿 JavaScript 第三方嵌套函数中的词典范围丢失 API 事件处理程序

Angular typescript JavaScript lexicon scope lost in nested function for third party API event handler

javascript

scope

nested-function

typescript

angular