javascript - ngx-leaflet-kartans zoomhändelser utlöses inte

Enligt ngx-leaflet-dokumentationslänken är både (leafletMapMoveEnd) och (leafletMapZoomEnd) exponerade händelser.

Jag antar att dessa händelser exponeras i samma DOM som kartan är initialiserad i, och bör implementeras på detta sätt:

<div 
 leaflet
 [leafletOptions]="options"
 (leafletMapReady)="onMapReady($event)"
 (leafletMapMoveEnd)="onMapMove($event)"
 (leafletMapZoomEnd)="onMapZoom($event)">

Är detta det rätta sättet att fånga dessa händelser?

(leafletMapReady) verkar fungera alldeles utmärkt.

Men varken (leafletMapZoomEnd) eller (leafletMapMoveEnd) verkar utlösas när jag rör med själva kartan.

Jag försökte panorera kartan, samt zooma in och ut. Ingen av dessa interaktioner får handleMapZoomEnd($event) handleMapMoveEnd($event) metoder att köras.

import { Component, Input, OnChanges, OnInit, Output, EventEmitter } from '@angular/core';
import * as fromLeafLet from 'leaflet'; 
import 'leaflet.markercluster';

@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: [
    './map.component.css',
    './extra-marker-icon.css'
  ]
})
export class MapComponent implements OnInit, OnChanges {
 constructor(){}

 onMapReady(map: fromLeafLet.Map): void {
    this.map = map;
  }

  onMapZoom(event: any):void{
    console.log('Zoom');
    this.onMapDirty.emit();
  }

  onMapMove(event: any):void{
    console.log('Move');
    this.onMapDirty.emit();
  }
}

Svar #1

I Github-repot för @asymmetrik/ngx-leaflet ngcli-handledning la jag till en gren demo/events som visar ett riktigt enkelt exempel på att använda zoom-/flytthändelser.

git clone [email :Asymmetrik/ngx-leaflet-tutorial-ngcli.git
git checkout demo/events

De filer som är av intresse är:

./src/app/app.component.html
./src/app/app.component.ts

Mallen (nedan) innehåller två handlare, en för vardera av utsignalerna leafletMapMoveEnd och leafletMapZoomEnd:

<div class="map"
  leaflet
  [leafletOptions]="options"
  (leafletMapReady)="onMapReady($event)"
  (leafletMapMoveEnd)="handleMapMoveEnd($event)"
  (leafletMapZoomEnd)="handleMapZoomEnd($event)"
></div>

Komponenten (nedan) skriver bara ut till konsolen vid dessa händelser. Jag tog bort nästan allt som inte är nödvändigt för att demonstrera att händelserna fungerar.

import { Component } from '@angular/core';
import * as L from 'leaflet';

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

  streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    detectRetina: true,
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });


  map: L.Map;

  options = {
    layers: [ this.streetMaps ],
    zoom: 7,
    center: L.latLng([ 46.879966, -121.726909 ])
  };

  onMapReady(map: L.Map): void {
    this.map = map;
  }

  handleMapZoomEnd(map: L.Map):void{
    console.log('onMapZoomEnd');
  }

  handleMapMoveEnd(map: L.Map):void{
    console.log('onMapMoveEnd');
  }
}