所以,问题很简单......
我有一个表格和一些 Angular 逻辑(计算样式等)......特别是我在 THs 上有这个
[class.hidden] = "column.group !== 'key-data' && currentTableView !== column.group"
对于我的表格粘性标题功能,我需要克隆表格并将其定位固定..使用一个指令,它做这样的事情(简化)
let newTable = element.cloneNode(true);
body.appendChild(newTable);
显然 Angular 逻辑没有应用到 newTable,但我希望它是...
我该怎么做?
最佳答案
所以我做了一些研究,这就是我想出的。
您可以做到,使用模板和 [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]
创建尽可能多的模板副本。保留所有内部绑定(bind)和 Angular 功能。
这是一个工作的 plunker:
http://plnkr.co/edit/jPt5eKUfLUe9FxnLH8bL?p=preview
如您所见,我已经使用 *ngIf
和 [ngStyle]
对其进行了测试,它们按预期工作,我看不出任何其他类型的原因of 指令不起作用。
您甚至可以使用 *ngFor
,但您需要提供 [ngOutletContext]
。
我已经在我正在处理的库中完成了此操作,您可以在此处查看示例:
https://github.com/flauc/ng2-simple-components/blob/master/src/select/select.component.ts
关于javascript - Angular 2 : Cloning component/HTML element and it's functionality,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39081979/