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

所以，问题很简单

我有一张桌子和一些角度逻辑（计算风格等）。。。具体来说，我有这个

[class.hidden] = "column.group !== 'key-data' && currentTableView !== column.group"

对于我的表粘性标题功能，我需要克隆表并将其定位到固定位置。。使用一个指令，这样做（简化）

显然，角度逻辑不适用于newTable，但我希望它是

---

我该怎么做呢？

所以我做了一些研究，这就是我想到的

您可以做到这一点，使用模板和

[ngTemplateOutlet]

实际上并不难。这就是它的工作原理：

@Component({
  selector: 'my-app',
  template: `
    <ng-template #temp>
        <h1 [ngStyle]="{background: 'green'}">Test</h1>
        <p *ngIf="bla">Im not visible</p>   
    </ng-template>
    <ng-container *ngTemplateOutlet="temp"></ng-container>
    <ng-container *ngTemplateOutlet="temp"></ng-container>
    `
})

export class AppComponent {
    bla: boolean = false;
    @ContentChild('temp') testEl: any;
} 

@组件({
选择器：“我的应用程序”，
模板：`
试验
即时消息不可见
`
})
导出类AppComponent{
bla:boolean=false；
@ContentChild（“临时”）测试仪：任何；
} 

因此，您可以创建一个引用模板，在其中添加所有逻辑，然后使用

[ngTemplateOutlet]

创建尽可能多的模板副本。保留所有内部绑定和角度功能

这是一个正在工作的plunker：

正如您所看到的，我已经用

*ngIf

和

[ngStyle]

对它进行了测试，它们按预期工作，我看不出任何其他类型的指令不起作用的原因

您甚至可以使用

*ngFor

，但是您需要提供

[ngOutletContext]

。 我在一个正在开发的库中完成了这项工作，您可以在这里看到一个示例：

---

为什么不使用相同的数据创建一个新实例？我不认为有办法用这种方式克隆它。新实例+存储/获取属性（通过服务或在最坏的情况下从本地存储…）不用于获取数据。。。。用于切换可见列和隐藏列。有一些ngClass的角度逻辑放在。。。我想在克隆的THsLooks上保留相同的逻辑很好。。。我想给你奖金，但还没有检查/测试它，如果这是我要找的。。。它看起来很接近。我已经成功地使用过几次了，我希望它也能为您工作。错误类型错误：templateRef.createEmbeddedView不是一个函数，谢谢@VictorCredihin。从编写时起，实现发生了更改。我已经更新了我的答案，使之与当前版本的angular保持一致。

@Component({
  selector: 'my-app',
  template: `
    <ng-template #temp>
        <h1 [ngStyle]="{background: 'green'}">Test</h1>
        <p *ngIf="bla">Im not visible</p>   
    </ng-template>
    <ng-container *ngTemplateOutlet="temp"></ng-container>
    <ng-container *ngTemplateOutlet="temp"></ng-container>
    `
})

export class AppComponent {
    bla: boolean = false;
    @ContentChild('temp') testEl: any;
}