DOM要素からComponentRefを取得

Question

Angular 2コンポーネントからDOM要素を取得する方法は既に回答済みです：ComponentRef.location.nativeElement（ComponentRef.locationはDOMに直接アクセスできるElementRefを与えます）。

しかし私はネイティブDOMオブジェクトのみを持っている場合、つまり逆にComponentRefへの参照を取得する方法は？

interact.jsを使用してAngular 2コンポーネントをドラッグ/ドロップしようとした場合です。ライブラリは、コールバック関数を使用して、ドラッグされた要素と、ドロップしようとしている要素を通知します。 eventオブジェクトが提供されています。唯一有益な情報はDOM要素（target属性）です。

例：

interact('my-component-tag').draggable({ 
    // ... 
    onstart: function (event:any) { 
     var dom = event.target; // ref to the <my-component-tag> tag 
     // How to find the Angular ComponentRef object here? 
    } 
    // ... 
}).dropzone({ 
    // ... 
    ondragenter: function (event:any) { 
     var targetDom = event.relatedTarget; // targeted <my-component-tag> tag 
     // Same question here, 
     // to identify where we want to insert the dragged element. 
    } 
    // ... 
}); 

Plunker here

あなたはsrc/Interactjs.tsにハンドラを確認することができます。コンソールを開いて関連するログを表示し、別のコンポーネントにコンポーネントをドロップします。私はDOMによって要素に関する情報を持っていますが、代わりにAngularコンポーネントが必要です。count属性にアクセスしましょう。

調査結果と試行は：

は私がsolution for the jquery-ui-draggable pluginを見つけましたが、このトリックは、少なくともドロップするターゲットのために、ここでは動作しません。

DOMに挿入する方法については、topicsもありますが、DomAdapterについて話していますが、DOMからAngularコンポーネントへの参照に役立つような方法は見つかりませんでした。

私は、DOMノードでループして位置を見つけ、同じ位置のコンポーネントリストからコンポーネントに到達しましたが、私のコンポーネント上で手動検索を考えましたが、それはとても醜いです...

これに関するアドバイスは大歓迎です。読んでくれてありがとう！

Answer 1

これはElementProbe APIを使用して達成できました。これは主に、角度1のelement.scope()と同様のデバッグ/分度器の統合を目的としています。

このAPIを使用するには、bootstrap()コールにELEMENT_PROBE_PROVIDERSを含める必要があります。その後、グローバルng.probe()を呼び出すことによって、任意のコンポーネントインスタンスを取得できます。例えば

、ここにあなたが現在イベントターゲットのためのコンポーネントのインスタンスを取得する方法である：

ng.probe(event.target).componentInstance 

Updated Plunker showing this is action

あなたはElementProbeのAPI Hereの実際の実装を見ることができます。