我按照主git中的步骤操作: https://github.com/Asymmetrik/ngx-leaflet
首先我安装了所需的库(leaflet,leaflet-draw,leaflet-ngx和leaflet-draw-ngx)
然后我在app.module中声明了所需的指令导入。
在我看来,我设置了以下内容:
<div class="col-md-6" style="height: 400px;"
leaflet
leafletDraw
[leafletOptions]="options"
[leafletLayers]="layers"
[leafletLayersControl]="layersControl"
[leafletDrawOptions]="drawOptions">
</div>
但是我收到以下错误:
> Uncaught Error: Template parse errors:
Can't bind to 'leafletDrawOptions' since it isn't a known property of 'div'. ("fletDraw [leafletOptions]="options" [leafletLayers]="layers" [leafletLayersControl]="layersControl" [ERROR ->][leafletDrawOptions]="drawOptions"> </div> <div class="col-md-6"> <table class="table table-striped c"): ng:///gxxxx.html@0:258
at syntaxError (compiler.es5.js?524d:1689)
at TemplateParser.parse (compiler.es5.js?524d:12802)
at JitCompiler._compileTemplate (compiler.es5.js?524d:26852)
at eval (compiler.es5.js?524d:26772)
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.es5.js?524d:26772)
at eval (compiler.es5.js?524d:26659)
at Object.then (compiler.es5.js?524d:1679)
at JitCompiler._compileModuleAndComponents (compiler.es5.js?524d:26658)
at JitCompiler.compileModuleAsync
我是角色4的新手,我做错了什么?或者它与ES版本有关吗?
答案 0 :(得分:1)
确保将Leaflet和LeafletDraw模块导入到定义组件的模块中(而不仅仅是在AppModule中)。
在你的AppModule.ts中:
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw.module';
...
imports: [
...
LeafletModule.forRoot(),
LeafletDrawModule.forRoot()
]
...
在组件的模块中:
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletDrawModule } from '@asymmetrik/ngx-leaflet-draw.module';
...
imports: [
...
LeafletModule,
LeafletDrawModule
]
...