web-dev-qa-db-fra.com

Comment utiliser la notice dans un Angular 5 app (composant)

J'écris une application Angular 5 dans laquelle je veux utiliser la bibliothèque JS de leafletJS. En détail, je souhaite appeler une fonction Angular en cliquant un marqueur sur la carte. Je sais que je dois installer un dépliant via npm et je l’ai déjà fait. Mais malheureusement, je ne peux pas déterminer les classes à importer. J'en ai essayé quelques-uns comme "Carte" mais cela ne fonctionnera pas. J'ai donc fini par intégrer le dépliant de la manière suivante: Je suis capable de définir la carte et d'ajouter des marqueurs. En cliquant sur le marqueur, son nom apparaît comme prévu dans la fenêtre contextuelle. Mais comment puis-je définir une variable dans Angular en cliquant sur le marqueur (lorsque la fenêtre contextuelle apparaît ?? ): -> l'alerte de la dernière ligne indique le nom souhaité, mais je ne peux malheureusement pas y accéder dans la vue (.html): 

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

    declare let L;
    var markers = new Array();
    var mymap;

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

    export class AreasgraphicComponent implements OnInit {

      tempMarker: any;
      markersname: any;


      constructor() { }

      ngOnInit() {
        //Declaring MAP
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);

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

        //Add Marker to map
        var marker = L.marker([51.505, -0.09]).addTo(mymap).bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
        marker.on("popupopen", this.onPopupOpen);  
        marker.name="TESTNAMEMARKER1";
        markers.Push(marker);

      }

      onPopupOpen(){
        this.tempMarker=this;

        //Show Marker.name
        alert (this.tempMarker.name);
        this.markersname = this.tempMarker.name;

        //alert displays name
        //BUT [(ngModel)]="markersname" in .html remains EMPTY
        alert(this.markersname);
      }

    }
angularleafletangular5
2
broetchen

essayez d'utiliser ChangeDetectorRef class pour informer la zone angulaire de tout événement déclenché en dehors de la zone angulaire:

import { ChangeDetectorRef } from '@angular/core';

...

constructor(private cdRef: ChangeDetectorRef) {}

...

onPopupOpen(){
  this.tempMarker = this;

  // Show Marker.name
  this.markersname = this.tempMarker.name;

  this.cdRef.detectChanges();
}

BTW ... il y a paquet Core Leaflet pour Angular.io

3
Andriy

Vous pouvez utiliser @ asymmetrik/ngx-leaflet .

Pour la détection de changement, vous avez deux méthodes ( Voir doc ):

  • Courir à l'intérieur de la zone angulaire (ngZone)
  • Détection manuelle des modifications (ChangeDetectorRef): moins précise
2
Ferhatos
declare let L;

La ligne ci-dessus mène à l'erreur suivante

TypeError: Impossible de lire la propriété 'Map' d'undefined Lors de l'initialisation de Map. c'est-à-dire à la ligne ci-dessous.

this.map = new L.Map
0
Venkat Ram Kunta