修复Angular组件中的范围

Question

我正在使用基于Leaflet库的2GIS maps API。 MapService（例如addMarkerToList()）中的功能很少，需要在点击地图时调用。

但是有一个问题：使用this.mapService.addMarkerToList会遇到错误：

ERROR TypeError: Cannot read property 'addMarkerToList' of undefined

所以我使用const self = this构造来避免这个问题。

可以通过其他方式解决吗？

map.component.ts

import {Component, OnInit} from '@angular/core';
import * as DG from '2gis-maps';
import {MapService} from '../../services/map/map.service';

let currentUserPos;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})

export class MapComponent implements OnInit {

constructor(private mapService: MapService) {}

  ngOnInit() {
    const self = this;
    const map = DG.map('map', {
      'center': [54.98, 82.89],
      'zoom': 13,
      'fullscreenControl': false
    });
    if (map) {
      console.log('Map added');
    }
    map.locate()
      .on('locationfound', function (e) {
        currentUserPos = DG.marker([e.latitude, e.longitude]).addTo(map).bindLabel('Your location', {
          static: true
        });
        const currentCenter = new DG.latLng(e.latitude, e.longitude);
        console.log('Current position founded: ' + 'lat = ' + e.latitude + '; lng = ' + e.longitude);
        map.setView(currentCenter, 16);
      });

    map.on('click', function (e) {
      const marker = DG.marker([e.latlng.lat, e.latlng.lng]);
      marker.addTo(map);
      marker.on('click', function() {
        marker.remove(map);
        self.mapService.deleteMarkerFromList(e.latlng.lat, e.latlng.lng);
      });
      console.log('Marker after adding:' + marker.getLatLng());
      self.mapService.addMarkerToList(e.latlng.lat, e.latlng.lng);
    });


  }
}