11

我目前正在开发一个使用 ngx-leaflet 来使用传单的 Angular 6 应用程序。我们希望能够创建一个可以通过向其添加指令来定制的基础组件。基本上与使用leafletDraw 使用绘图功能时使用的模式相同。但是这些指令应该比leaflet 和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，因为它仅由特定的更高级别指令使用。

所以问题是，如何创建这些“高阶指令”。

4

2 回答 2

1

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

于 2018-08-09T07:25:24.627 回答
0

如果您的每个绑定实际上都是指令而不仅仅是输入/输出绑定，您可以嵌套 DOM 结构并仍然将 Leaflet 指令注入到您的指令中。ngx-leaflet 已经为实现其大部分功能的各种指令执行此操作。

我的意思是，您可以执行以下操作：

<div class="map" leaflet [leafletOptions]="options" [leafletLayers]="layers">
  <div *ngIf="someCondition"
       leafletDraw [leafletDrawOptions]="drawOptions"></div>
  <div *ngIf="someOtherCondition"
       poiSelection [poiSelectionOptions]="selectionOptions"></div>
</div>

在引擎盖下，leaflet 指令被注入到 leafletDraw 指令中（使用 Angular 依赖注入）。而且，我认为您的指令也是如此。

ngx-leaflet 还允许您执行此操作以添加/删除单层。它与leafletLayer实际上是注入传单指令的指令相同的技术。

<div class="map" leaflet [leafletOptions]="options">
  <div [leafletLayer]="layer1"></div>
  <div [leafletLayer]="layer2"></div>
  <div [leafletLayer]="layer3"></div>
</div>
于 2018-09-22T02:54:44.270 回答