Angular2：克隆组件/HTML 元素及其功能

Question

所以，问题很简单...

我有一个 table 和一些 angular 逻辑（计算样式等）...特别是我在 THs

上有这个

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

对于我的 table 粘性 headers 功能，我需要克隆 table 并将其定位固定..使用一个指令，它会做这样的事情（简化）

let newTable = element.cloneNode(true);
body.appendChild(newTable);

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

我该怎么做？

Answer 1

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

您可以做到，使用模板和 [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;
}

因此，您创建了一个参考模板，将所有逻辑添加到其中，然后您只需使用 [ngTemplateOutlet] 创建尽可能多的模板副本。保留所有内部绑定和 angular 功能。

这是一个正在工作的 plunker：

http://plnkr.co/edit/jPt5eKUfLUe9FxnLH8bL?p=preview

如您所见，我已经使用 *ngIf 和 [ngStyle] 对其进行了测试，它们按预期工作，我看不出有任何其他类型的指令不起作用的原因。

您甚至可以使用 *ngFor，但您需要提供 [ngOutletContext]。我已经在我正在处理的库中完成了此操作，您可以在此处查看示例：

https://github.com/flauc/ng2-simple-components/blob/master/src/select/select.component.ts

Angular2：克隆组件/HTML 元素及其功能

Angular2: Cloning component / HTML element and it's functionality

javascript

angular2-directives

angular