dynamicznie dołączyć dziecko z dyrektywą

Question

Mam podstawowy element:

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

Chcę utworzyć dyrektywę, która pozwala mi napisać to:

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

i czyni to:

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

Zasadniczo stworzyłem dyrektywę:

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

    constructor(private el:ElementRef){ 
    } 

    onMouseDown(){ 
     //TODO 
    } 

    onMouseMove(){ 
     //TODO 
    } 

    onMouseOver(){ 
     //TODO 
    } 
} 

Problem polega na tym, że nie wiem, jak utworzyć element potomny za pomocą el i chcę, aby zdarzenia były wiązane na elemencie potomnym, a nie na rzeczywistym elemencie.

Od jest typu any Nie mogę dowiedzieć się, jakie metody/właściwości mogę użyć, aby osiągnąć to, co chcę.

Answer 1

el.nativeElement zwraca HTMLElement jeśli selektor zawiera - przeciwnym razie HtmlUnknownElement

kątowej ze sposobów jest użycie klasy Renderer w połączeniu z ElementRef tak.

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

i użyj dostarczonej metody.

Dzięki temu aplikacja WebWorker i renderowanie po stronie serwera jest bezpieczne.