Angular 8中为Leaflet库回调绑定事件处理器的优化方案

Hey there! Nice work getting your Leaflet map up and running in Angular—dealing with this context mismatches when hooking up third-party library events is such a common pain point. Your factory method approach works, but let's look at more idiomatic, cleaner Angular-native solutions to fix this:

1. Use an Arrow Function Directly in the Event Binding #

Arrow functions automatically capture the surrounding this context (your component instance), so you can skip the factory method entirely. This is the simplest and most readable approach for one-off handlers:

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() { }

  ngOnInit() {
    this.map = L.map('newhotspot').setView([this.latitude, this.longitude], 13);
    
    // Use an arrow function here to preserve component `this`
    this.map.on('click', (e) => {
      this.latitude = e.latlng.lat.toString();
      this.longitude = e.latlng.lng.toString();
      this.map.setView([e.latlng.lat, e.latlng.lng]);
    });

    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: '_MY_SECRET_ACCESS_TOKEN_'
    }).addTo(this.map);
  }
}

2. Bind this to a Class Method #

If you want to keep your click handler logic in a separate method (for reusability or cleaner code), use Function.prototype.bind() to explicitly tie the component's this to the method:

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() { }

  // Define handler as a regular class method
  onMapClick(e: any) {
    this.latitude = e.latlng.lat.toString();
    this.longitude = e.latlng.lng.toString();
    this.map.setView([e.latlng.lat, e.latlng.lng]);
  }

  ngOnInit() {
    this.map = L.map('newhotspot').setView([this.latitude, this.longitude], 13);
    
    // Bind component `this` to the handler method
    this.map.on('click', this.onMapClick.bind(this));

    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: '_MY_SECRET_ACCESS_TOKEN_'
    }).addTo(this.map);
  }
}

3. Define the Handler as an Arrow Function Class Property #

Another option is to define your handler as an arrow function directly in the class. This ensures this always refers to the component instance, no extra binding needed:

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;

  // Arrow function property preserves `this` context
  onMapClick = (e: any) => {
    this.latitude = e.latlng.lat.toString();
    this.longitude = e.latlng.lng.toString();
    this.map.setView([e.latlng.lat, e.latlng.lng]);
  }

  constructor() { }

  ngOnInit() {
    this.map = L.map('newhotspot').setView([this.latitude, this.longitude], 13);
    
    // No binding needed—just pass the method reference
    this.map.on('click', this.onMapClick);

    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: '_MY_SECRET_ACCESS_TOKEN_'
    }).addTo(this.map);
  }
}

Quick Note #

Notice I added .toString() when assigning latitude and longitude—since your component properties are typed as string, but Leaflet returns numbers. This keeps your type consistency intact (you could also change the properties to number if that makes more sense for your use case!).

Your HTML template doesn't need any changes—all these approaches will keep the two-way [(ngModel)] bindings working as expected.

内容的提问来源于stack exchange，提问作者Matthias