angular – 从指令动态附加子项

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

我想创建一个允许我写这个的指令：

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

并呈现这个：

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

所以,基本上我做了一个指令：

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

    constructor(private el:ElementRef){
    }

    onMouseDown(){
        //TODO
    }

    onMouseMove(){
        //TODO
    }

    onMouSEOver(){
        //TODO
    }
}

问题是我不知道如何使用el创建子元素,我希望事件在子元素上绑定,而不是在实际元素上绑定.

由于ElementRef.nativeElement是任何类型,我无法找出我可以用来实现我想要的方法/属性.