Angular 动态附加子from指令

我有一个基本要素：

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

问题是我不知道如何使用

el

创建子元素，我希望事件绑定到子元素上，而不是实际元素上

---

由于

ElementRef.nativeElement

属于

any

类型，因此我无法确定可以使用哪些方法/属性来实现我的目标。

el.nativeElement

如果选择器包含

-

则返回a，否则返回a

这样做的方法是将该类与

ElementRef

组合使用

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

并使用它提供的方法

---

这可以确保应用程序WebWorker和服务器端渲染的安全。

渲染器确实很有用，但创建元素会将元素附加到视图中，是否有方法将其预处理？预处理与什么相关？是否在

el

前加前缀？为此，您需要类似于

el.nativeElement.parentNode.insertBefore（newChild，el.nativeElement）

的内容。我认为渲染器不能做到这一点。我的意思是，如果我有

，我想在第一个div中，在child之前添加新元素：

这里而不是在child之后。我想在这种情况下，您仍然需要
insertBefore（）
，但您可以将
这里
与
@ViewChild（）一起使用firstChild
然后
this.\u el.nativeElement.insertBefore（newElement，this.firstChild.nativeElement）
<只有在调用了
ngAfterViewInit（）
之后，code>firstChild

才会在构造函数中可用。

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

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