ArcGIS 4.16 Angular中内容的弹出模板自定义功能

Question

我正在尝试根据服务返回的结果在弹出模板中添加自定义内容。服务函数在 ngOninit() 或不属于弹出模板函数的自定义函数中工作。曾经在弹窗自定义模板功能中使用，服务收集结果失败。

请在下面找到代码（仅包含主要部分），导入自定义服务。

import { CustomService } from '../shared/service/custom.service';


 constructor(private customService: CustomService){}

 // Formation of the popup template
      var popupTrailheads = {
        title: "Unique id: {ID}",
        content: this.getcustomcontent,
      };

形成要素层，弹出窗口应来自​​该层。

this.layer_fifteen = new FeatureLayer({
        url: `${this.esriURL}/15`,
        visible: true,
        outFields: ['*'],
        popupTemplate: popupTrailheads
      });

以下函数 getcustomcontent() 从服务中收集详细信息。

 public getcustomcontent(feature) {

// the service code
 this.customService.getIdDetails(popup_id).subscribe((posts) => {
//required to get the result from the service
}
}

当我使用 try-catch 时，它显示“TypeError: Cannot read property 'customService' of null”。如何在弹窗模板中使用服务？

Answer 1

我认为您遇到了上下文问题。 getcustomcontent里面的this的值在执行渲染模板时为null。

有一些选项可以设置函数的执行上下文。在下面的示例中，我使用的是bind。

popupTemplate: {
  content: this.customPopupFunction.bind(this) // <- here
}

基本上，我表示当customPopupFunction 被调用时，它应该绑定到组件。这就是函数内部的this 起作用的原因，它会在弹出模板内容中呈现组件的madeBy 属性。

Mozilla Docs - bind

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core";
import { loadModules } from "esri-loader";

@Component({
  selector: 'app-esri-map',
  templateUrl: './esri-map.component.html',
  styleUrls: ['./esri-map.component.scss']
})
export class EsriMapComponent implements OnInit, OnDestroy {

  @ViewChild("mapViewNode", { static: true }) private mapViewEl: ElementRef;
  view: any;

  // to keep loaded esri modules
  esriModules = {
    layers: {
      FeatureLayer: null
    }
  };

  madeBy = '@cabesuon';

  constructor() {}

  async initializeMap() {
    try {
      // Load the modules for the ArcGIS API for JavaScript
      const [
        Map,
        MapView,
        FeatureLayer
      ] = await loadModules([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer"
      ]);

      // save the modules on a property for later
      this.esriModules.layers.FeatureLayer = FeatureLayer;

      // Create the FeatureLayer

      // USA counties layer
      var countiesLayer = new FeatureLayer({
        portalItem: {
          id: "cd13d0ed1c8f4b0ea0914366b4ed5bd6"
        },
        outFields: ["*"],
        minScale: 0,
        maxScale: 0,
        popupTemplate: {
          content: this.customPopupFunction.bind(this)
        }
      });

      // Configure the Map
      const mapProperties = {
        basemap: "streets",
        layers: [countiesLayer]
      };

      const map = new Map(mapProperties);

      // Initialize the MapView
      const mapViewProperties = {
        container: this.mapViewEl.nativeElement,
        map,
        zoom: 5,
        center: [-107.3567, 37.7705]
      };

      this.view = new MapView(mapViewProperties);
      await this.view.when(); // wait for map to load
      return this.view;
    } catch (error) {
      console.error("EsriLoader: ", error);
    }
  }

  ngOnInit() {
    this.initializeMap().then(_ => {
      // The map has been initialized
      console.log("mapView ready: ", this.view.ready);
    });
  }

  ngOnDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null;
    }
  }

  customPopupFunction(feature) {
    return `<p>This is <strong>${feature.graphic.attributes.NAME}</strong> county, state of <strong>${feature.graphic.attributes.STATE_NAME}</strong></p>` +
    `<p>This is an example of a custom popup content made by <span style="color:blue;">${this.madeBy}</span></p>`;
  }

}