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]创建尽可能多的模板副本。保留所有内部绑定和角度功能。

这是一个工作的掠夺者：

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元素及其功能

1 个答案: