Angular2: bileşen/HTML öğesi Klonlama ve <p></p> özellikle ben bu var ... Bir masa ve (stilleri, vb hesaplama) Üzerinde bazı açısal mantığı var ... soru oldukça basittir, Bu yüzden işlevsellik

Question

var Masamın yapışkan başlıkları işlevsellik için

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

TH'nin üzerinde bir yönergesini kullanarak .. masa ve sabit pozisyon klonlamak gerekir, bu (basitleştirilmiş)

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

gibi bir şey yapar Açıkçası, açısal mantık newTable'a uygulanmıyor, ancak ben onu ...

Nasıl yapabilirim?

Answer 1

Bu yüzden biraz araştırma yaptım ve bu benim ortaya koyduğum şey.

Yapabilir ve aslında bu zor şablonlar ve [ngTemplateOutlet] kullanıyor. Bu nasıl işliyor:

@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; 
} 

Yani bir referans şablonu oluşturmak, bunun içinde sizin mantığı tüm ekleyebilir ve sonra sadece [ngTemplateOutlet] kullanılarak şablonun sayıda kopyasını oluşturun. Tüm iç bağlamalar ve açısal işlevsellik korunur. İşte

bir çalışma plunker şudur: Ben *ngIf ve [ngStyle] ile test ettik görebilirsiniz ve onlar beklendiği gibi çalışmayabilir ve herhangi bir neden görmüyorum gibi

http://plnkr.co/edit/jPt5eKUfLUe9FxnLH8bL?p=preview

neden başka tür yönerge işe yaramaz.

*ngFor'u bile kullanabilirsiniz, ancak [ngOutletContext]'u sağlamanız gerekir.

https://github.com/flauc/ng2-simple-components/blob/master/src/select/select.component.ts