Dynamicalyは、私は基本的な要素を持っているディレクティブ

Question

から子供を追加

<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

角度の方法は、とにかくElementRefとの組み合わせでRendererクラスを使用することですHTMLElementを返します。

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

であり、それが提供する方法を使用してください。

これは、アプリケーションWebWorkerとサーバー側のレンダリングを安全に保ちます。