如何在角度2中更新ElementRef

使用dynamicComponentloader加载组件时遇到问题。我有一个父组件和三种子组件。如何在角度2中更新ElementRef

首先我通过使用Interact.js将子组件A和子组件B拖动到父组件中。显示如下

Component A 
Component B

我使用的方法是loadIntoLocation(.., elementRef, ..)。然后我改变通过DOM自己的位置操纵这样

Component B 
Component A

改变位置我会拖累第三组分装入为父级，我认为它应该在为父级的底部插入等之后，下面

Component B 
Component A 
Component C

但实际上第三部件被插入componentA和以componentB

Component B 
Component C 
Component A

我使此电子的位置xample a plnkr here。

我认为原因这个问题是我改变DOM，但不映射变化elementRef。所以我找到了更新elementRef的方法，希望它能解决我的问题。

任何建议来解决这个或任何溶液来改变角度的方式两个组件的位置？

来源

2015-11-10 Garry

@ r2_d2感谢您的格式改进。 – Garry

我一直在玩这个一期一会

首先，我抱着组件的引用注入，所以我可以使用他们后来

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是一样的，不需要改变。就像我在gitter中告诉过你的，我认为它在内部跟踪了这个位置，并且你没有了解它就可以操纵DOM（这纯粹是基于它的行为猜测，显然需要调查）。所以这是我得到的最角度的方式，所以我希望它能帮助你。

这是您的案例工作的plnkr。

来源

2015-11-11 12:14:54

此解决方案适用于特定的contidion，例如更改最后两个子组件的位置。但是如果我有四个或更多的子组件（A，B，C，D）并且想要改变B＆C的位置。它不会工作。不是吗？ – Garry

你有更多的条件，更多的逻辑。是的，这个答案是针对你所问的用例而特定的，所以如果问题背后有更多的问题，你将不得不多做一点逻辑，但是你已经向前迈出了一步，现在你有一些工作要做与：D –

当然。你已经给了我一个方向，我会继续努力。你的回答给了我很多有关ng2的信息，我甚至不知道_loadIntoLocation_可以返回一个承诺XD。由于文档不完整，也许我应该对源代码进行更多的研究。 – Garry

如何在角度2中更新ElementRef

回答

相关问题