我正在使用ngx-leaflet
和ngx-leaflet-draw
显示传单地图。我可以从工具栏标记图标在地图上显示一个标记。当我单击标记时,我想显示一个材质对话框组件。单击标记时,我可以在控制台上显示标记坐标。代码是
public onMapReady(map: L.Map) {
map.on(L.Draw.Event.CREATED, function(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); // works properly
});
}
});
}
然后我尝试修改显示材质对话框组件的代码但得到错误
import { NgZone } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { MaterialDialogComponent } from './m-dialog.component';
...
...
export class NgxLeafletComponent {
dialogRef: MatDialogRef<MaterialDialogComponent>;
public constructor(private zone: NgZone) {}
public onMapReady(map: L.Map) {
map.on(L.Draw.Event.CREATED, function(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);
}
}
我也尝试这个没有zone.run()
方法,直接dialog.open()
方法但再次捕获错误
未捕获的类型错误:无法读取未定义的属性“打开”
注意: 当我尝试这种外部onMapReady()
方法并且没有ngx-leaflet
它时,它完全可以正常工作。