如何在角度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

回答

相關問題