“Leaflet Draw”无法绑定到“LeafletDrawOptions”

Question

我正在与Angular合作，试图使用@ OpenStreetMaps /ngx-leaflet-draw让它工作。然而，由于下面的错误，我不能让这些选项工作，并且不能解决它。

Error: src/app/app.component.html:7:16 - error NG8002: Can't bind to 'leafletDrawOptions' since it isn't a known property of 'div'.       
    [leafletDrawOptions]="drawOptions"

我的app.module

..
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw';

@NgModule({
  ..
  imports: [
    ..
    LeafletModule,
    LeafletDrawModule
  ],
..
})
export class AppModule { } 

和component.ts

import { Component } from '@angular/core';
import { tileLayer, latLng, circle, polygon } from 'leaflet';
import * as L from 'leaflet';
import 'leaflet-draw';

  leafletOptions: any;
  leafletLayers: any;
  mapCenter: any;
  zoomLevel: any;
  layersControl: any;
  drawOptions: any;
  constructor() {
  }

  ngOnInit() {
    this.leafletLayers = [tileLayer(
      'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      { maxZoom: 7, attribution: '...' })];
    this.mapCenter = latLng(64.805606, 9.910027);
    this.zoomLevel = 5;
    this.layersControl = {
      baseLayers: {
        'Open Street Map': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 25, maxNativeZoom: 19 }),
      }
    };
    this.drawOptions = {
      position: 'topright',
      draw: {
        marker: {
          icon: L.icon({
            iconSize: [25, 41],
            iconAnchor: [13, 41],
            iconUrl: 'assets/marker-icon.png',
            shadowUrl: 'assets/marker-shadow.png'
          })
        },
        polyline: false,
        circle: {
          shapeOptions: {
            color: '#aaaaaa'
          }
        }
      }
    };
  }

似乎与这个问题相似，但从未得到解决；https://gis.stackexchange.com/questions/273200/importing-leaflet-draw-ngx-for-angular-4

Answer 1

在我的例子中，我忘记将指令leafletDraw添加到div元素中。这是我的HTML：

<div class="map-container"
     leaflet
     leafletDraw
     [leafletOptions]="options"
     (leafletMapReady)="onMapReady($event)"
     (leafletMapZoomEnd)="onMapZoomEnd($event)"
     [leafletDrawOptions]="drawOptions"
     (leafletDrawCreated)="onDrawCreated($event)">
    <div [leafletLayer]="drawnItems"></div>
</div>