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

DS_web_developer：

所以，问题很简单...

我有一张桌子，上面有一些角度逻辑（计算样式等）...特别是在TH上

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

对于我的表粘性标头功能，我需要克隆表并将其固定..使用指令执行此操作（简化）

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

显然，角度逻辑未应用于newTable，但我希望它是...

我该怎么做？

菲利普·劳克（Filip Lauc）：

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

您可以做到，使用模板和其实并不难[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]。保留所有内部绑定和角度功能。

这是一个工作正常的人：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。