从指令动态附加子项

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 类型，我无法找到我可以使用哪个 methods/properties 来实现我想要的。

Answer 1

el.nativeElementreturns一个HTMLElement if the selector contains a - otherwise an HtmlUnknownElement

Angular 的方法是将 Renderer class 与 ElementRef 结合使用。

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

并使用它提供的方法。

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

从指令动态附加子项

Dynamically append child from directive

angular2-directives

angular