Абстрактная директива проспекта в пользовательской директиве

В настоящее время я работаю над программой Angular 6, которая использует листовки ngx для использования листовки. Мы хотим создать базовый компонент, который можно настроить, добавив к нему директивы. В основном тот же шаблон, который используется при использовании возможностей рисования с использованием 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. Поиск способа управления или настройки директивы более высокого уровня (poiSelection) с директивой нижнего уровня (leafletDraw).
  2. Как добавить директиву динамически. Как вы можете видеть в приведенном выше шаблоне для OurNiceMapComponent, я не добавил leafletDraw, потому что это используется только для определенной директивы более высокого уровня.

Поэтому вопрос заключается в том, как создавать эти "директивы высшего порядка".

ОТВЕТЫ

Ответ 1

Существует обходное решение, вы можете использовать ngSwitch/ngIf и визуализировать leaflet с правильным набором директив в зависимости от параметров компонента.

Ответ 2

Если каждое из ваших привязок является фактически директивами, а не только привязками ввода/вывода, вы можете вложить структуру DOM и по-прежнему вводить директиву Leaflet в свою директиву. ngx-sheetlet уже делает это для различных директив, которые реализуют большинство своих функций.

Я имею в виду, вы можете сделать следующее:

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

Под капотом директива листовки вводится в директиву leafletDraw (с использованием инъекции угловой зависимости). И я бы предположил, что это так же для вашей директивы.

ngx-sheetlet также позволяет вам делать это для добавления/удаления отдельных слоев. Это та же техника, в которой leafletLayer фактически является директивой, в которую вводится директива leafletLayer.

<div class="map" leaflet [leafletOptions]="options">
  <div [leafletLayer]="layer1"></div>
  <div [leafletLayer]="layer2"></div>
  <div [leafletLayer]="layer3"></div>
</div>