摘要远离自定义指令中的传单指令

Question

我目前正在研究使用ngx-leaflet来使用传单的Angular 6应用程序.我们希望能够创建一个可以通过向其添加指令来自定义的基本组件.基本上与使用leafletDraw使用绘图功能时使用的模式相同.但是这些指令应该比传单和leafletDraw指令更抽象.

目前我们最终得到了我们的"基础组件"中使用的以下模板

<div class="map" leaflet [leafletOptions]="options" [leafletLayers]="layers" [leafletOptions]="options" leafletDraw [leafletDrawOptions]="drawOptions" poiSelection [poiSelectionOptions]="selectionOptions"
poiSelection [trackPlaybackOptions]="trackOptions">
</div>

正如您所看到的,这可能最终导致不同抽象级别的指令.

我宁愿这样:

<app-our-nice-map poiSelection [poiSelectionOptions]="selectionOptions" [trackPlaybackOptions]="trackOptions">
</app-our-nice-map>

而OurNiceMapComponent组件的模板如下所示:

<div class="map" leaflet [leafletOptions]="options" [leafletLayers]="layers" [leafletOptions]="options">
</div><!-- this is here because Stackoverflow doesn't like single div /-->

这有两个挑战.

1. 找到一个关于更高级别指令如何与更低级别指令(leafletDraw)进行交互/配置(poiSelection)的方法.
2. 如何动态添加指令.正如您在上面的OurNiceMapComponent模板中所看到的,我没有添加leafletDraw,因为它仅由特定的更高级别指令使用.

所以问题是,如何创建这些"更高阶指令".

Answer 1

有一个解决方法，您可以使用ngSwitch/ngIf并leaflet根据组件选项使用正确的指令集进行渲染。