L'accesso a TemplateRef fornisce un nodo di commento vuoto in Angular2 - angular, typescript

Creazione di un componente di ordinamento personalizzato in Angular2, ma non riesco ad accedere a una variabile modello. Devo essere in grado di accedere al ng-template in modo che io possa "clonare / timbrare" quindi l'elemento per creare zone di rilascio, in base al modello fornito.

Ho provato a usare @ViewChild("dropzone"), ma restituisce anche un nodo di commento vuoto.

Ecco il componente

@Component({
selector: "my-sortable",
template: `
<ng-content select="my-sortable-content"></ng-content>
`
})
export class SortableComponent implements AfterViewInit {

@Input() //@ContentChild("dropzone")
dzTemplate: any;

onAfterViewInit() {
// Outputs an object but the
// nativeElement is an empty
// comment node
console.log(this.dzTemplate);
}
}

E qui è l'HTML

<my-sortable [dzTemplate]="dropzone">
<ng-template #dropzone>
<p>Hey, I"m a drop zone!!</p>
</ng-template>
<my-sortable-content>
<div *ngFor="...">
...
</div>
</my-sortable-content>
</my-sortable>

risposte:

Ho dovuto fare qualcosa di simile e alla fine ho dovuto usarlo forwardRef dal nucleo angolare

import { Component, AfterViewInit, ViewChild, forwardRef } from "@angular/core";

/* ... in component somewhere */
@ViewChild(forwardRef(() => SomeComponent)) // You can use a DI token I believe
private paginationControls: SomeComponent;

Potrebbe essere difficile con qualsiasi tipo, provalo! : D Potrebbe essere necessario utilizzare gettoni di iniezione anche - ma non sono sicuro ...

Se è necessario modificare il comportamento in base al tipodel modello, sarebbe molto meglio con una digitazione statica e il passaggio su una stringa dinamica o qualcosa del genere. Ho già creato una mappa di componentID -> tipi di componente e ho usato quello per creare un'istanza di nuovi componenti ComponentFactoryResolver - è un po 'una seccatura dato che devi elencarlotutti i casi, ma se è necessario visualizzare i dettagli del componente nel componente selezionatore, è necessario farlo (se forwardRef finisce per non funzionare).

Ho trovato la soluzione Si scopre che il ElementRef l'oggetto ha il metodo createEmbeddedView() che restituirà a EmbeddedViewRef. Da lì, posso accedere agli elementi DOM nella proprietà rootNodes. Questi nodi non sono ancora collegati a nessun elemento, quindi sono perfetti per la clonazione / timbratura.