将组件添加到ngx-leaflet标记弹出窗口

Question

如何将自定义组件绑定到ngx-leaflet弹出窗口？例如，我想要在弹出窗口中呈现一个自定义元素<my-card></my-card>，当我单击它时，我的组件将被呈现，而不是来自leaflet的标准弹出窗口。

Answer 1

我建议您安装最新版本的ngx-leaflet和ngx-leaflet draw。我正试着专注于代码。看看这个，我想它会对你有帮助

​

// First install all dependencies
npm install leaflet
npm install leaflet-draw
npm install @asymmetrik/ngx-leaflet
npm install @asymmetrik/ngx-leaflet-draw

npm install --save-dev @types/leaflet
npm install --save-dev @types/leaflet-draw

​

​

import { NgZone } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MaterialDialogComponent } from './m-dialog.component';
import * as L from 'leaflet';
...
...
export class NgxLeafletComponent {
  dialogRef: MatDialogRef<MaterialDialogComponent>;

  public constructor(private zone: NgZone) {}

  public onMapReady(map: L.Map) {
      map.on(L.Draw.Event.CREATED, (e) => {
        const type = (e as any).layerType,
          layer = (e as any).layer;

        if (type === 'marker') {
          const markerCoordinates = layer._latlng;
          layer.on('click', () => {
            console.log(markerCoordinates); 
            this.zone.run(() => this.onClickMarker()); //error
          });
        }
      });
    }

  onClickMarker() {
    this.dialogRef = this.dialog.open(MaterialDialogComponent);
  }
 }

​