Dynamicaly从指令

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如果选择包含-否则HtmlUnknownElement

这样做是使用Renderer类结合ElementRef反正的角方式返回HTMLElement。

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

并使用它提供的方法。

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