Question

我正在编写一个Angular 5应用程序，我想在其中使用leafletJS中的JS库。详细地说，我想在地图上单击标记时调用Angular函数。我知道我必须通过npm安装传单，我已经完成了。但不幸的是我无法确定要导入哪些类。我尝试了一些像“地图”bnut它不会工作。所以我最终以下面的方式整合了传单：我能够定义地图并添加标记。通过单击标记，它的名称将在弹出窗口中按预期显示。 但是如何通过单击标记在Angular中设置变量（当弹出窗口出现时？）： 的 - ＆GT;最后一行中的警报显示了所需的名称，但遗憾的是我无法在视图（.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);
      }

    }

Answer 1

尝试使用ChangeDetectorRef类来通知角度区域关于从角度区域发出的事件：

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 ......有Core Leaflet package for Angular.io

Answer 2

您可以使用@asymmetrik/ngx-leaflet。

对于变更检测，您有两种方法（See doc）：

在Angular的区域内运行（ngZone）
手动触发变更检测（ChangeDetectorRef）：不太精确

Answer 3

child_theme/inc

上面的行导致以下错误

TypeError：无法读取未定义的属性“ Map” 当我们初始化Map时。即在下一行。

declare let L;

如何在Angular 5应用程序（组件）中使用传单

3 个答案: