Question

使用dynamicComponentloader加载组件时遇到问题。我有一个父组件和三种子组件。

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

Component A
Component B

我使用的方法是loadIntoLocation(.., elementRef, ..)。然后我通过DOM操作改变他们的位置，就像这样

Component B
Component A

更改位置后，我会将第三个组件拖到parentcomponent中，我认为它应该插入到父组件的底部，如下所示

Component B
Component A
Component C

但实际上第三个组件被插入到位置componentA和componentB

中

Component B
Component C
Component A

我已将此示例设为plnkr here 。

我认为导致此问题的原因是我更改了DOM，但没有将更改映射到elementRef。所以我找到了更新elementRef的方法，并希望它可以解决我的问题。

任何解决此问题的建议或任何改变两个组件的解决方案＆＃39;有角度的位置？

Answer 1

我已经玩了一段时间

首先我拿着正在注入的组件的引用，以便稍后使用它们

# No commas
customer1=(my_custdomain.com my_custdomain2.com)
customer2=(my1_custdomain.com my1c_custdomain2.com)

arrayref=$client[@]
for i in "${!arrayref}"; do
do
      func_name
done

loadIntoLocation会返回一个Promise，它会解析为ComponentRef，这就是我保留在数组中的内容。

现在，当我们交换它们时，我拿了第一个，我重新插入它，当它正确解析时我删除了第一个引用。为了更清楚：插入A和B，再次插入A，删除第一个A 。

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));
}

这就是你所需要的。插入ComponentC是相同的，不需要更改。就像我在gitter中告诉你的那样，我认为它在内部跟踪位置并且你在没有angular2知道的情况下操纵DOM（这是基于其行为的纯粹猜测，显然需要调查）。所以这是我获得的最有棱角的方式，所以我希望它对你有帮助。

这是plnkr，您的案件正在运作。

如何在角度2更新ElementRef？

1 个答案: