Angular2：克隆組件/ HTML元素和它的功能

我有一個表並在其上一些角度邏輯（計算樣式等）......具體我有這個在THS

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

對於我的表粘頭的功能，我需要克隆表，並將其固定的位置..用指令，這並不像這樣（簡體）

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

顯然角邏輯並不適用於新表，但我希望它是...

我該怎麼做？

來源

2016-08-22 DS_web_developer

爲什麼你不只是創建具有相同數據的新實例？我不認爲有這種方式克隆它的方法。 –

新實例+存儲/獲取屬性（通過服務或在最糟糕的情況下從本地存儲，..） – 2016-08-25 08:20:58

不適用於獲取數據....用於切換可見和隱藏的列。 ngClass有一些角度邏輯放在THs上...我想在克隆的THs上保留相同的邏輯 –

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

你可以做到這一點，它實際上並不難，使用模板和[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

來源

2016-08-30 06:43:20

看起來不錯...想獎賞你的賞金，但還沒有檢查/測試它，但如果這就是我尋找...它看起來像是接近 –

我已經成功地使用了它幾次，我希望它也適用於你。 –

Angular2：克隆組件/ HTML元素和它的功能

回答

相關問題