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

【问题标题】：HowTo use leaflet in an Angular 5 app (component)如何在 Angular 5 应用程序（组件）中使用传单
【发布时间】：2018-01-15 22:21:18
【问题描述】：

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

    }

【问题讨论】：

尝试使用 js 库包含传单。你可以参考这个链接。 codehandbook.org/use-leaflet-in-angular

标签： angular leaflet angular5

【解决方案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();
}

顺便说一句...有Core Leaflet package for Angular.io

【讨论】：

【解决方案2】：

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

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

在 Angular 的区域 (ngZone) 内运行
手动触发更改检测 (ChangeDetectorRef)：不太精确

【讨论】：

【解决方案3】：

declare let L;

以上行导致以下错误

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

this.map = new L.Map

【讨论】：