Воссоздание ранее созданных динамических компонентов с использованием Angular 7

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

Теперь я пытаюсь имитировать поведение многостраничной формы, поэтому, когда пользователь нажимает «Следующая страница», я очищаю контейнер, используя это.container.clear () и заново заполняйте его, используя компоненты новой страницы.

Это все работает нормально, и у меня есть список компонентов, созданных на каждой странице.Тем не менее, я застрял на том, что делать, если пользователь нажимает кнопку «Предыдущая страница».Я не уверен, как повторно заполнить контейнер, используя компоненты, хранящиеся в объекте this.components?

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

Это правильный подход, или я должен посмотреть на него по-другому?Благодаря.

Answer 1

Наконец-то все заработало благодаря коду из Uday Vunnam ниже.Вот окончательный рабочий код.Я приму ответ Удея, поскольку он привел меня к правильному пути и избавил меня от написания большого количества ненужного кода!

Изначально

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

Answer 2

Это интересный подход с динамическими компонентами.Вы пробовали методы detach () и insert () ViewContainerRef, как показано ниже -

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

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