Как динамически добавить клонированный узел в angular2 (эквивалент cloneNode)

Для иллюстрации воспользуемся следующей разметкой:

<p>Paragraph One</p>
<p>Paragraph Two</p>   <!-- Let's try to clone this guy -->
<p>Paragraph Three</p>

Вариант 1. Вручную оберните элемент для клонирования внутри тега <template>

Это в основном то, что вы сделали, только вместо того, чтобы распечатать шаблон с помощью ngTemplateOutlet, возьмите ссылку на него в классе вашего компонента и обязательно вставьте ее с помощью createEmbeddedView().

@Component({
    selector: 'my-app',
    template: `
      <p>Paragraph One</p>
      <template #clone>
        <p>Paragraph Two</p>
      </template>
      <p>Paragraph Three</p>

      <button (click)="cloneTemplate()">Clone Template</button>

      <div #container></div>
    `
})
export class AppComponent{
    // What to clone
    @ViewChild('clone') template;

    // Where to insert the cloned content
    @ViewChild('container', {read:ViewContainerRef}) container;

    constructor(private resolver:ComponentFactoryResolver){}

    cloneTemplate(){
        this.container.createEmbeddedView(this.template);
    }
}

В этом примере я вставляю «клон» в определенное место разметки (<div #container></div>), но вы также можете добавить его внизу шаблона текущего компонента.

Также обратите внимание, что исходный <p>Paragraph Two</p> больше не виден.

Вариант 2. Используйте структурную директиву

Если вы хотите клонировать элемент в его текущем местоположении, в результате получится:

<p>Paragraph One</p>
<p>Paragraph Two</p>   <!-- Original paragraph -->
<p>Paragraph Two</p>   <!-- Cloned paragraph   -->
<p>Paragraph Three</p>

Затем вы можете создать структурную директиву *clone и применить ее к абзацу для клонирования, например:

<p>Paragraph One</p>
<p *clone>Paragraph Two</p>
<p>Paragraph Three</p>

Интересно, что структурная директива заключает элемент, к которому она применяется, внутрь тега <template>. Очень похоже на то, что мы сделали в варианте 1, только в этом случае у нас НЕТ КОНТРОЛЯ над местом, где распечатываются клоны (они появятся там, где был исходный абзац).

Это, по сути, будет повторять поведение *ngFor, так что, вероятно, это не очень полезно. Кроме того, из вашего комментария к yurzui следует, что это не то, что вы хотите.