从指令动态附加子项

Question

我有一个基本要素:

<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类型anyI我无法找出我可以用来实现我想要的方法/属性.

Answer 1

el.nativeElement如果选择器包含否则为HtmlUnknownElement,则返回HTMLElement-

Angular的做法是无论如何都要使用Renderer类ElementRef.

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

并使用它提供的方法.

这使您的应用程序WebWorker和服务器端呈现安全.