コンポーネントを別の親コンポーネントに角で移動する

Question

この質問は、角度バージョンthis questionです。この試みは、次の問題が付属しています

class NewParentComponent { 

    constructor(elRef: ElementRef) { 
    elRef.nativeElement.appendChild(myMovableElement); 
    // where the reference to myMovableElement may come from a service. 
    } 
} 

：

1. 我々は角度で直接DOMを操作することになっていません

   次のスニペットは、私の最初の試みをまとめました。何らかの形でRendererでコンポーネントを実現できますか？ - @ ThinkingMediaの答えでは、Renderer2を使用してください。

2. 子コンポーネントを移動した後に元の親コンポーネントが破棄された場合、子コンポーネントに対してngOnDestroyメソッドが呼び出されます。

this Plunkerを参照してください。このPlunkerはAngular Dynamic Component Loader exampleの上に構築されています。ブラウザのコンソールログを開き、 "destroyed！"広告のバナーが変更されるたびにテキストが記録されます。テキストがドロップボックスにドラッグされました。

Answer 1

：

oldParentViewContainerRef.detach(index); 
newParentViewContainerRef.insert(viewRef); 

indexは、ビュー・コンテナ内の子コンポーネントのビューのインデックスです。

let index = oldParentViewContainerRef.indexOf(viewRef); 

viewRef相当子コンポーネントのビューに：それは、以下を用いて得ることができます。子コンポーネントがComponentFactoryResolverの助けを借りて、プログラムで作成された場合にのみ、私の知る限り、viewRefを手に入れることができます。

let factory = componentFactoryResolver.resolveComponentFactory(MyChildComponentType); 
let componentRef = oldParentViewContainerRef.createComponent(factory); 
let viewRef = componentRef.hostView(); 

あなたが間コンポーネントを移動できるようにしたい場合は、ここでお持ち帰りは、あります異なる親コンポーネントを使用する場合は、静的にHTMLに記述するのではなく、プログラマチックにこれらの可動コンポーネントを作成してください。これにより、ViewContainerRefと一緒にうまく動作する可動コンポーネントのインスタンスがViewRefになります。

例：Plunkerを参照してください。

Answer 2

DOMを操作することはお勧めしませんが、必ずしも間違っているとは限りません。たとえば、複雑なUIコンポーネントでは、ほとんどの場合、DOMを直接操作する必要があります（たとえば、ダイアログやドロップダウンの特定の実装）。避けるべきことは、開発者が角度をつけずにDOMを操作し、操作がもはや必要なくなった後にDOMをクリーンアップすることができない、漏れです。

DOM内でコンポーネントを移動するとき、ラッパーの内部でコンポーネントを移動すると最も効果的です。たとえば、モーダルコンポーネントにコンポーネントを含めると、モーダルの親要素はDOM内にあり、コンポーネントが追加されたレベルにネストされ、モーダルの子要素がbodyタグに追加されます。モーダルを閉じる必要がある場合、ダイアログの子要素はラッパーに戻され、コンポーネントはラッパーに戻されます。

Answer 3

はい、Renderer2クラスでこれを行うことができます。これは推奨される方法です。このクラスを使用する理由は、アプリケーションをAngular Universalと互換性を保つためです。

AngularはAngularJSのようにDOMツリーに結合されません。 Angularは、コンポーネントとDOM間の結合を処理するオブジェクトをViewRef作成します。これは、ViewRefで使用されるネイティブ要素を、変更留置ツリーまたは注入ツリーを破ることなく移動できることを意味します。

Renderer2クラスはAPIメソッドに制限がありますが、それはあなたが必要とする方法を持っています。

abstract appendChild(parent: any, newChild: any): void; 
abstract insertBefore(parent: any, newChild: any, refChild: any): void; 
abstract removeChild(parent: any, oldChild: any): void; 

コンポーネントとしてウィンドウを持つUIライブラリを作成しました。これらのウィンドウは親ウィンドウパネルにドッキングできます。私が行うことができる唯一の方法は、コンポーネントのDOM要素を移動することでした。

私の懸念は、コンポーネントのライフサイクルです。私の窓が破壊されると、それらの要素は元の場所に戻されます。要素が別の親によってDOMから削除された場合、ngOnDestroyが呼び出されるかどうかはわかりません。ViewContainerRefを使用して達成することができる別の親コンポーネントから子コンポーネントを移動