从指令

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

Answer 1

如果选择器包含el.nativeElement，则{p> -会返回HTMLElement，否则会HtmlUnknownElement

Angular的做法是将Renderer类与ElementRef组合使用。

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

并使用它提供的方法。

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