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

Question

所以,问题很简单......

我有一张桌子和一些角度逻辑(计算样式等)......特别是我在TH上有这个

[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: `
    <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;
} 

因此,您创建一个参考模板,在其中添加所有逻辑,然后您只需使用创建尽可能多的模板副本[ngTemplateOutlet].保留所有内部绑定和角度功能.

这是一个工作的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