Как обновить ElementRef в угловом 2

Question

У меня проблема при использовании dynamicComponentloader для загрузки компонента. У меня есть родительский компонент и три типа подкомпонентов.

Во-первых, я перетаскиваю подкомпонент A и подкомпонент B в исходный компонент с помощью Interact.js. Отображается, как показано ниже

Component A 
Component B 

Метод, который я использую, - loadIntoLocation(.., elementRef, ..). Тогда я изменить их положение с помощью DOM манипулировать как этот

Component B 
Component A 

После изменения позиции я перетащить третий компонент в parentcomponent, и я думаю, он должен быть вставлен в нижней части parentcomponent, как показано ниже

Component B 
Component A 
Component C 

Но на самом деле третий компонент вставляется в место Componenta и componentB

Component B 
Component C 
Component A 

Я сделал это е xample a plnkr here.

Я думаю, что причиной этой проблемы является изменение DOM, но не изменение карты на elementRef. Поэтому я нахожу способ обновить elementRef и надеюсь, что он сможет решить мою проблему.

Любые рекомендации по решению этого или любого решения по изменению положения двух компонентов в угловом режиме?

Answer 1

Я играл с этим на некоторое время

Сначала я держусь ссылки на Компоненты впрыскивают таким образом я могу использовать их позже

instances : [] = []; 

addAB(){ 
    this.loader.loadIntoLocation(ComponentA, this.elementRef, "container") 
     .then((r) => this.instances.push(r)); 
    this.loader.loadIntoLocation(ComponentB, this.elementRef, "container") 
     .then((r) => this.instances.push(r)); 
} 

loadIntoLocation возвращает обещание, которое разрешает ComponentRef, вот что я держу в массиве.

Теперь, когда мы поменяем их оба, я взял первый, я вставляю его, и когда он правильно решает, я удаляю первую ссылку. Чтобы быть более ясным: Вставьте A и B, вставьте A еще раз, удалите первый A.

changePosition(){ 
    // Take the first one 
    let first = this.instances[0]; 
    // Reinsert the first one 
    this.loader.loadIntoLocation(first.hostComponentType, this.elementRef, "container") 
     .then((_) => first.dispose()); // dispose() destroys the previous instance 
} 

И это все, что вам нужно. Вставка компонента ComponentC не изменилась. Как я уже говорил вам вслух, я думаю, что внутренне он отслеживает позицию, и вы манипулировали DOM без углового2, зная об этом (это чистое угадывание, основанное на его поведении, очевидно, требует исследования). Так что это самый угловатый способ, который я получил, поэтому я надеюсь, что это поможет вам.

Вот plnkr с вашим корпусом.