dynamicaly accodare bambino da direttiva

Question

Ho un elemento fondamentale:

<div> 
    I'm a basic element 
</div> 

Voglio creare una direttiva che mi permette di scrivere questo:

<div resizable-top> 
    I'm a basic element 
</div> 

e rende questo:

<div resizable-top> 
    <div> drag me to resize element </div> 
    I'm a basic element 
</div> 

Quindi, in pratica ho fatto una direttiva:

@Directive({ 
    selector: '[resizable-top]', 
    host: { 
     '(mousedown)':'onMouseDown()', 
     '(mousemove)':'onMouseMove()', 
     '(mouseover)':'onMouseOver()' 
    } 
}) 
export class ResizableDirective{ 

    constructor(private el:ElementRef){ 
    } 

    onMouseDown(){ 
     //TODO 
    } 

    onMouseMove(){ 
     //TODO 
    } 

    onMouseOver(){ 
     //TODO 
    } 
} 

il problema è che non so come creare un elemento figlio usando el e voglio che gli eventi vengano associati sull'elemento figlio, non sull'elemento reale.

Poiché ElementRef.nativeElement è di tipo any Non riesco a trovare i metodi/proprietà che è possibile utilizzare per ottenere ciò che voglio.

Answer 1

el.nativeElement restituisce un HTMLElement se il selettore contiene un - altrimenti un HtmlUnknownElement

Il modo angolare di farlo è quello di utilizzare la classe Renderer in combinazione con ElementRef comunque.

constructor(private el:ElementRef, private renderer:Renderer){ 
} 

e utilizzare il metodo che fornisce.

Ciò mantiene l'applicazione WebWorker e il rendering lato server sicuri.