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

Question

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

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);
  }
 }