angular - 如何在 Angular 5 应用程序中使用传单(组件)

Question

我正在编写一个 Angular 5 应用程序，我想在其中使用 leafletJS 中的 JS 库。详细来说，我想在单击 map 上的标记时调用 Angular - 函数。我知道我必须通过 npm 安装 leaflet 并且我已经完成了。但不幸的是我无法确定要导入哪些类。我尝试了一些类似“ map ”的东西，但它不起作用。因此，我最终通过以下方式集成了传单:我能够定义 map 并添加标记。通过单击标记，其名称将按预期显示在弹出窗口中。但是如何通过单击标记来设置 Angular 中的变量(当弹出窗口出现时？？):--> 最后一行中的警报显示了所需的名称，但不幸的是我无法在 View (.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用于通知 Angular 区域有关从 Angular 区域激发的事件的类:

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