Question

我正在使用以下代码动态创建组件：

components = {}
....
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
const component = this.container.createComponent(componentFactory);

// Push the component so that we can keep track of which components are created
this.components[pageNumber].push(component);

现在，我试图模仿多页表单的行为，因此当用户单击“下一页”时，我使用this.container.clear（）清除了容器，并使用新页面的组件重新填充了容器。

一切正常，我在每个页面上都有一个创建的组件列表。但是，如果用户单击“上一页”按钮，该怎么办。我不确定如何使用this.components对象中存储的组件来重新填充容器？

我不能再次推送新组件，因为它们的值可以由用户修改，而重新创建它会重置所有值。

这是正确的方法还是应该以其他方式研究它？谢谢。

Answer 1

这是使用动态组件的有趣方法。您是否尝试过ViewContainerRef的detach（）和insert（）方法，如下所示-

const viewRef = this.container.detach();
this.viewRefs[pageNumber].push(viewRef);

// after coming back to the page
this.container.insert(this.viewRefs[pageNumber].pop());

Answer 2

最后，由于下面的Uday Vunnam的代码，它得以正常运行。这是最终的工作代码。不过，我会接受Uday的回答，因为它引导我走了正确的道路，使我免于编写大量不必要的代码！

最初，

this.viewRefs = {}

用于从容器中分离视图：

this.viewRefs[this.currPage] = [];
//The line below was added as the container pops values mid-loop, disturbing the length
let containerLength = this.container.length;
for(let i=0; i<containerLength; i++){
  //Detach the 0 index always, as the container values are being popped put internally.
  this.viewRefs[this.currPage].push(this.container.detach(0));
}

用于在新页面中附加视图：

for(let i=0; i<this.viewRefs[this.currPage].length; i++){
  this.container.insert(this.viewRefs[this.currPage][i])
}

使用Angular 7重新创建以前创建的动态组件

2 个答案: