Блог

Я работаю над довольно большим приложением с множеством «сущностей», которые довольно взаимосвязаны. Давайте упростим приложение в простом CRUD-приложении с множеством экранов «MasterDetail» для каждого типа объекта.

(Основная деталь: слева список / таблица объектов, справа деталь при нажатии на элемент слева)

Как я уже сказал, многие объекты «подключены» к другим объектам, поэтому, исходя из деталей, вы можете щелкнуть по этим другим объектам, которые иногда отображаются снова в MasterDetail, но для простоты в этом примере страница сведений с дополнительными элементами управления подкачкой (чтобы пользовательможно легко перейти к следующему связанному объекту)

Подключено много типов сущностей. Чтобы избежать проблем с циклическими зависимостями, мы должны использовать LazyLoading . (если мы этого не сделаем, мы окажемся в одном огромном модуле, что, очевидно, не то, что мы хотим)

Я настроил пример:

Компонент MasterDetail со списком / таблицей слева и подробностями справа.

• Деталь отображается router-outlet внутри основного элемента.
• Маршруты к подключенным объектам должны быть «дочерними маршрутами», поскольку маршрутизируемый компонент должен иметь доступ к компоненту DetailComponent (возможно, через внедрение компонента?)

Хорошо, и теперь проблема: все работает хорошо, за исключением того, что я не могу правильно настроить пользовательский интерфейс. Когда я нажимаю на «DetailComponent» на подключенный объект, я не хочу, чтобы это отображалось внутри detailComponent, но полностью под MasterDetail. На самом деле, я хочу «скрыть» (не уничтожить, поскольку мне нужно состояние), мастер-деталь, чтобы я мог визуализировать детали, используя полный размер, который использовал мастер-деталь.

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

Вы можете найти пример здесь: https://ng-run.com/edit/KzNjVgPMhXNob3QekJyv

Есть предложения?