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

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

0 голосов
/ 05 января 2019

Я хочу сделать сайт похожим на блог 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Это HTML-код родительского компонента 

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

1 Ответ

0 голосов
/ 05 января 2019

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

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

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

...