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

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

1 个答案: