Как организовать включение слоев (компонентов)?
У меня есть список элементов меню: Самолеты, Поезда, Автобусы.
Элементы меню кликабельны и активируют определенный, главный компонент, который вставляется в <ng-template></ng-template>.
Для самолетов это компонент: AirPlaneComponent и тд.
Также пользователь может включить компоненты не через меню, например компонент AddAirPlaneComponent, который при активации должен отобраазитьс вместо AirPlaneComponent.
При этом, важно, если AddAirPlaneComponent дезактивируется, то нужно показать предудыщий компонент AirPlaneComponent.
Я решил создать сервис, который хранит историю активации компонентов в стеке, для каждого корневого меню - стек свой.
ComponentService {
airplaneStack: ComponentType[];
carStack: ComponentType[];
busStack: ComponentType[];
}
Где стек - это список из ранее активированных компонентов. Что дает знать, какой компонент сейчас активирован и какой был до этого (n-1).
Теперь в сервисе я могу прослушать, какой элемент меню был активирован, например меню типа Самолеты.
Тогда я активирую нужный компонент и помещаю в стек airplaneStack.
Если через меню актвируется другой компонент - который тоже относится к Самолеты. Например добавление самолета. То он тоже добавляется в стек airplaneStack.
Проблема в следующем:
- На каждый корневой пункт меню приходится создавать свой стек
- Всегда при возникновении события (клик по меню или клик извне) - нужно определять тип события, чтобы определить его в нужны стек.
- Стек связывет пункт меню с компонентом, который нужно активировать.
- Стек должен всегда иметь ссылку на компонент (первый элемент массива)
Правильный у меня подход? Как бы вы это решили?
Я думаю это можно сделать одним списком. Каждый элемент списка может ссылаться на другой. Связанный список.
Если активируется меню Самолеты и у этого элемента есть ссылка на Добавление Самолета. То активируем Добавление Самолета.
Если дезактивируем Добавление Самолета. То Самолеты больше не ссылается на Добавление Самолета. Поэтому будет активированы Самолеты.