Angular: клонирование элементов ng-контента и его функциональность

Question

Я пытаюсь клонировать ng-content элементы компонента вместе с любой функциональностью, добавленной в HTML этого содержимого. Например, разметка с использованием компонента может выглядеть следующим образом:

<custom-component>
  <button (click)="doAThing();">A button</button>
</custom-component>

Затем я настроил свой шаблон для пользовательского компонента следующим образом:

<ng-template #content>
  <ng-conent></ng-content>
</ng-template>
<ng-template *ngTemplateOutlet="content"></ng-template>
<div class="second-area>
  <ng-template *ngTemplateOutlet="content"></ng-template>
</div>

Я ожидаю, что ng-content будет дублироваться в обе ngTemplateOutlet области. То, что происходит, - то, что это выдвигает к последнему выходу и игнорирует первое. Эта разметка будет хорошо дублировать обычную разметку, но нг-контент будет перемещаться только в одну точку.

Разве это невозможно с помощью этой техники, я упускаю что-то очевидное или есть другой способ клонировать содержимое ng-content вместе с любыми событиями, связанными с ним?

Answer 1

Я нашел это решение, которое сработало для меня. Сначала HTML, вам понадобится директива, чтобы обернуть содержимое, чтобы вы могли ссылаться на него. Вам нужно будет использовать звездочку с директивой, чтобы ее можно было дублировать.

<custom-component>
  <ng-container *customDirective>
    <button (click)="doAThing();">A button</button>
  </ng-container>
</custom-component>

Директива не требует дополнительного кода. Нам просто нужно это для справки.

В вашем пользовательском компоненте вам нужно создать ссылку на директиву через @ContentChild, например:

@ContentChild(CustomDirective, { read: TemplateRef }) transcludeTemplate;

Затем мы используем следующее для нашего HTML-кода пользовательского компонента, избегая использования вместе тегов ng-content:

<ng-template *ngTemplateOutlet="transcludeTemplate"></ng-template>
<div class="second-area>
  <ng-template *ngTemplateOutlet="transcludeTemplate"></ng-template>
</div>

Так что на самом деле это не то же самое, что дублирование <ng-content>, но это дает нам аналогичную функцию. Очевидно, что ng-контент не умножается на предполагаемое поведение . Так что это может быть лучшим способом достижения аналогичной цели.