如何使用Angular 8为某些回调（Leaflet库）提供事件处理程序

Question

我收集了一些使用传单库的有角度的8应用程序。我最后写了一些有效的代码，但是觉得它可能不是实现我想要的最佳方法。请先阅读直到结尾...

我的组件打字稿文件看起来像这样：

import { Component, OnInit } from '@angular/core';

declare let L;

@Component({
  selector: 'app-new-hotspot-form',
  templateUrl: './new-hotspot-form.component.html',
  styleUrls: ['./new-hotspot-form.component.css']
})
export class NewHotspotFormComponent implements OnInit {

  latitude: string = "51.505";
  longitude: string = "-0.09";
  name: string = "Hotspot 1";
  radius: string = "5.0";
  map: any;

  constructor() { }

  getOnMapClickHandler() {
    const myComponent = this;
    let clickHandler = function(e) {
      myComponent.latitude = e.latlng.lat;
      myComponent.longitude = e.latlng.lng;
      myComponent.map.setView([e.latlng.lat, e.latlng.lng]);
    };
    return clickHandler;
  }

  ngOnInit() {
    this.map = L.map('newhotspot').setView([this.latitude, this.longitude], 13);
    this.map.on('click', this.getOnMapClickHandler());

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1Ijoid3Vyc3Ricm90MSIsImEiOiJjazEyNGZxcXkwMGVrM25wY21lZWk0dHg4In0.B8pXUcOT6q1sYep38ln9LQ'
    }).addTo(this.map);

  }

}

以及相应的html文件，如下所示：

<div class="ui-fluid">

  <div class="ui-g">

    <div class="ui-g-12 ui-md-6">

      <div class="ui-g-4">
        Name
      </div>

      <div class="ui-g-8">
        <input [(ngModel)]="name" pInputText type="text" />
      </div>

    </div>

    <div class="ui-g-12 ui-md-6">

      <div class="ui-g-4">
        Radius
      </div>

      <div class="ui-g-8">
        <input [(ngModel)]="radius" pInputText type="text" />
      </div>

    </div>

    <div class="ui-g-12">

      <div class="ui-g-2">
        Location
      </div>

      <div class="ui-g-10">
        <div id="newhotspot"></div>
      </div>

    </div>

    <div class="ui-g-12 ui-md-6">
      <div class="ui-g-4">
        Longitude
      </div>
      <div class="ui-g-8">
        <input [(ngModel)]="longitude"  type="text" />
      </div>
    </div>
    <div class="ui-g-12 ui-md-6">
      <div class="ui-g-4">
        Latitude
      </div>
      <div class="ui-g-8">
        <input [(ngModel)]="latitude" pInputText type="text" />
      </div>
    </div>

  </div>

</div>

primeng也“在船上”，但在这个问题上没有任何作用（我希望...）。

我正在为地图的click事件分配一个事件处理程序，并且想知道为什么我做的数据绑定无法正常工作。直到我发现我的事件处理程序没有分配给组件的this为止。然后，我更改了代码以执行绑定此somehow的工厂方法。尽管代码现在可以正常工作了，但我还是对此有些疑惑，并且想知道是否还有一种更本地化的方法可以使事件处理程序正常工作

Answer 1

按照AJT82的建议，粗箭头功能语法应该为您提供所需的内容，例如更改

this.map.on('click', this.getOnMapClickHandler());

到

this.map.on('click', (e) => {
  this.latitude = e.latlng.lat;
  this.longitude = e.latlng.lng;
  this.map.setView([e.latlng.lat, e.latlng.lng]);
}

然后您将可以删除getOnMapClickHandler。