如何在angular2中动态添加克隆的节点(相当于cloneNode)

Question

在Angular2中，在某些情况下，我需要复制一个节点，而不是移动它。该节点具有angular2属性，因此cloneNode无法工作。我该怎么做？

*什么不起作用

let el = <HTMLElement>document.getElementById(divId);
if ((<HTMLElement>el.parentNode).id == 'itsMe')
el = <HTMLElement>el.cloneNode(true);
document.getElementById(anotherId).appendChild(el);

*Angular2：克隆组件/HTML元素及其'；s功能

@Component({
selector: 'my-app',
template: `
<template #temp>
<h1 [ngStyle]="{background: 'green'}">Test</h1>
<p *ngIf="bla">Im not visible</p>   
</template>
<template [ngTemplateOutlet]="temp"></template>
<template [ngTemplateOutlet]="temp"></template>
`
})
export class AppComponent {
bla: boolean = false;
@ContentChild('temp') testEl: any;
} 

但是如何动态添加模板呢？

Answer 1

让我们使用以下标记进行说明：

<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的评论来看，这似乎不是你想要的。