Angular маршрутизация, создание маршрута с использованием точек

Question

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

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

Я использую route-outlet, чтобы открыть панель слайдов.

В Html У меня есть что-то вроде этого:

<button (click)="showAddLinkSlidePanel()"></button>
<router-outlet name="addLinkSlidePanel"></router-outlet>

Машинопись:

showAddLinkSlidePanel() {
        this.router.navigate([{ outlets: { addLinkSlidePanel: 'insert-link' } }], { state: 'some data here', skipLocationChange: true });
    }

Итак, я просто перенаправляю на другую страницу без изменения URL

Когда я импортирую RouterModule из модуля DialogWindow, у меня появляется

RouterModule.forChild([
    {
        path: 'insert-link',
        component: AddLinkSlidePanelComponent,
        outlet: 'addLinkSlidePanel',
    },
])

и в моем App.module

RouterModule.forRoot([])

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

this.router.navigate([{ outlets: { addLinkSlidePanel: null } }], {
            skipLocationChange: false,
        });

. Я сталкиваюсь с исключением, когда после закрытия диалога и повторного его открытия отображается панель слайдов. Я уверен, это потому, что я не импортировал RouteModule неправильно. Может быть, вы можете просто дать мне совет, что я делаю неправильно. Спасибо.

Answer 1

Я добавил

.forChild([
  {
    path: '',
    outlet: 'addLinkSlidePanel',
    component: null,
    children: [],
  },
  {
    path: 'insert-link',
    component: AddLinkSlidePanelComponent,
    outlet: 'addLinkSlidePanel',
    children: [],
  },
])

и

.forRoot([])

это работает!