Angular2:克隆组件/超文本标记语言元素及其功能

Question

所以，问题很简单...

我有一个表格和一些角度的逻辑(计算样式，等等)…具体来说，我把这个放在

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

对于我的表格粘性标题功能，我需要克隆表格并将其定位到固定位置。使用一个指令，它可以做如下所示(简化)

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

显然，角度逻辑不适用于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功能都保留了下来。

这是一个有效的柱塞：

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