Angular2：コンポーネント/ HTML要素をクローニングし、それはとても機能

Question

だ、問題は非常に簡単です...

私は...特に私はこのことを表し、その上にいくつかの角度のロジック（スタイルの計算など）を持っていますTHsをこの（簡体字）のような何かをするディレクティブを使用して、私はそれが固定テーブルと位置のクローンを作成する必要が私のテーブルスティッキーヘッダ機能..については

[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