Состояние компонента Preserver в Angular

Question

Я создаю веб-приложение с возможностью рисовать на карте. У меня есть меню настроек, которое является просто еще одним компонентом, который я вызываю по вызову router.navigateByUrl();. То же самое на обратном пути.

Проблема теперь в том, что в пути все в компоненте загружается снова. Карта со всеми ее рисунками исчезла. Аутентификация исчезла (ну, в любом случае, мне, вероятно, следует перенести это в сервисы) и многое другое Я просто не могу переключить все на услуги.

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

Большое спасибо!

Answer 1

При изменении маршрута связанный компонент действительно уничтожается. Таким образом, хотя вы можете сохранить состояние компонента, но вы все равно будете инициализировать компонент снова, когда дойдете до этого маршрута.

Решения:

1. Возможно, вам следует использовать css чтобы скрыть и показать компонент вместо изменения маршрута.

2. Создать экземпляр компонента, используя ComponentFactoryResolver. И когда вы будете готовы отобразить этот компонент, создайте его, используя 'ViewContainerRef.createComponent', и установите для него все свойства (например, isAuthenticated, реквизиты, связанные с картой и т. Д. c). Конечно, для этого вам нужно будет сохранить состояние этого компонента в службе.

3. Для этого вам также придется сохранить состояние. Вы можете использовать queryParams для передачи значений компоненту.

Answer 2

Самый правильный способ решить эту проблему - использовать сервис, например, картографический сервис. Тогда в этом сервисе у вас есть свойство или наблюдаемая, которая содержит все данные о чертежах. Когда пользователь возвращается к компоненту, вы получаете все данные из службы карт и перерисовываете.

Если вы не хотите использовать службу, есть несколько других способов сделать это. Вам не обязательно использовать маршрутизатор, вы можете просто использовать скрытое свойство элемента. Когда пользователь открывает меню, вы скрываете карту. Когда он покидает меню, вы показываете его снова. Что-то вроде:

<app-my-map-component [hidden]="menuIsOpen">
<app-my-menu-component *ngIf="menuIsOpen">

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