#angular #angular-router
#angular #angular-маршрутизатор
Вопрос:
Я работаю над довольно большим приложением с множеством «сущностей», которые довольно взаимосвязаны. Давайте упростим приложение в простом CRUD-приложении с множеством экранов «MasterDetail» для каждого типа объекта.
(Основная деталь: слева список / таблица объектов, справа деталь при нажатии на элемент слева)
Как я уже сказал, многие объекты «подключены» к другим объектам, поэтому, исходя из деталей, вы можете щелкнуть по этим другим объектам, которые иногда отображаются снова в MasterDetail, но для простоты в этом примере страница сведений с дополнительными элементами управления подкачкой (чтобы пользовательможно легко перейти к следующему связанному объекту)
Подключено много типов сущностей. Чтобы избежать проблем с циклическими зависимостями, мы должны использовать LazyLoading . (если мы этого не сделаем, мы окажемся в одном огромном модуле, что, очевидно, не то, что мы хотим)
Я настроил пример:
Компонент MasterDetail со списком / таблицей слева и подробностями справа.
- Деталь отображается
router-outlet
внутри основного элемента. - Маршруты к подключенным объектам должны быть «дочерними маршрутами», поскольку маршрутизируемый компонент должен иметь доступ к компоненту DetailComponent (возможно, через внедрение компонента?)
Хорошо, и теперь проблема: все работает хорошо, за исключением того, что я не могу правильно настроить пользовательский интерфейс. Когда я нажимаю на «DetailComponent» на подключенный объект, я не хочу, чтобы это отображалось внутри detailComponent, но полностью под MasterDetail. На самом деле, я хочу «скрыть» (не уничтожить, поскольку мне нужно состояние), мастер-деталь, чтобы я мог визуализировать детали, используя полный размер, который использовал мастер-деталь.
Я думал об использовании именованных маршрутизаторов, которые могли бы быть решением, но я не могу заставить его работать.
Вы можете найти пример здесь: https://ng-run.com/edit/KzNjVgPMhXNob3QekJyv
Есть предложения?
Комментарии:
1. Итак, какой из них должен быть? Вы бы хотели, чтобы деталь, на которую нажали , занимала все
MasterDetail
пространство (без ее уничтожения), или вы хотели бы отобразить ее подMasterDetail
?2. В примере, когда вы нажимаете на продукты в деталях, я хочу, чтобы сведения о продукте занимали все пространство MasterDetail (не уничтожая его)
3. Если вы хотите
MasterDetail
, чтобы компонент не был уничтожен, вам, возможно, придется выбрать пользовательскийRouteReuseStrategy
. У меня есть несколько заметок об этом здесь .