Как сохранить / загрузить динамически созданные компоненты с помощью Angular 7

Question

Я хочу сделать сайт как блог Linkedin.

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

Как я могу кешировать динамически созданный компонент в localStorage?? и как я могу динамически загрузить компонент из localStorage, когда я перезагрузить браузер??

и еще один вопрос. Нужно ли мне ngOnDestroy() в этом коде?

Я добавил localStorage часть, как это. но произошла ошибка "Преобразование круговой структуры в JSON в JSON.stringify".

Какое лучшее решение для кэширования массива объектов ComponentRef??

Parent Это родительский компонент

// I added this part
import { COMPONENTS_REFERENCES } from '../../constants';

export class ParentComponent implements OnInit {

    index: number;
    componentsReferences = [];

    @ViewChild('viewContainerRef', { read: ViewContainerRef }) VCR: ViewContainerRef;

    constructor(
        private CFR: ComponentFactoryResolver) {
    }

    ngOnInit() {

        // I added this part.
        const cachedComponents = JSON.parse(localStorage.getItem(COMPONENTS_REFERENCES));
        if (cachedComponents && cachedComponents.length > 0) {
            this.componentsReferences = cachedComponents;
        }

        this.index = 1;
    }

    addChild() {
        const componentFactory = this.CFR.resolveComponentFactory(ChildComponent);
        const componentRef: ComponentRef<ChildComponent> = this.VCR.createComponent(componentFactory);
        const currentComponent = componentRef.instance;
        currentComponent.selfRef = currentComponent;
        currentComponent.index = this.index++;
        currentComponent.userId = this.user.id;
        currentComponent.compInteraction = this;
        this.componentsReferences.push(componentRef);  

        // I added this part
        localStorage.setItem(COMPONENTS_REFERENCES, JSON.stringify(this.componentsReferences));
    }

    removeChild(index: number) {
        if (this.VCR.length < 1) {
            return;
        }
        const componentRef = this.componentsReferences.filter(x => x.instance.index === index)[0];
        const component: ChildComponent = <ChildComponent>componentRef.instance;
        const vcrIndex: number = this.VCR.indexOf(componentRef);
        this.VCR.remove(vcrIndex);
        this.componentsReferences = this.componentsReferences.filter(x => x.instance.index !== index);

        // I added this part
        localStorage.setItem(COMPONENTS_REFERENCES, JSON.stringify(this.componentsReferences));
    }

    // ... and another ChildComponent add/remove method here
}

Это HTML родительского компонента

<div>
    <ng-template #viewContainerRef></ng-template>
</div>

Answer 1

Если у вас есть listObject в родительском компоненте и кешировать listObject в localStorage, вы можете получить его и использовать при загрузке браузера.

ваш ключ будет post_cache, а значение будет массивом объекта json (массив сообщений)

PS: я не вижу в вашем коде ничего, что нужно уничтожить