Разрешить маршрут в нескольких точках

Question

Чего я хочу достичь

Я хочу открыть любой маршрут, который доступен в моем приложении Angular, внутри модального диалога.

Что я пробовал

Я создал компонент хостинга под названием content, который выглядит следующим образом:

<router-outlet></router-outlet>

<div id="stack" class="invisible" [ngClass]="{ 'stacked': isStacked }">
    <button (click)="closeChild()">Close</button>
    <router-outlet name="stack"></router-outlet>
</div>

Div stack по умолчанию невидим. На всех страницах реализован сервис, который должен открывать ссылки в router-outlet.

Затем я пытаюсь открыть ссылки с этим кодом:

        this.isStacked = true;
        const routeParams = this.parseRoute(route);

        this.router.navigate([
                {
                    outlets: { stack: [ 'content', 'page1' ] },
                },
            ],
            {
                skipLocationChange: true,
            },
        );

Компонент content находится в пределах перехвата всех маршрутов content/:sub-page. Идея состоит в том, чтобы разрешить укладку таких модальных диалогов и открыть основной маршрут внутри основного маршрутизатора-розетки и, если требуется, открыть новый модальный диалог в розетке под названием stack.

Для этого я реализовал ngOnInit:

    ngOnInit(): void {
        this.route.params.subscribe(params => {
            const route = (params['sub-page'] || '');
            const pathParts = this.parseRoute(route);
            this.router.navigate(pathParts, { skipLocationChange: true });
        });
    }

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

Есть ли решение того, чего я пытаюсь достичь?