Angular6 Router - переход к нескольким дочерним маршрутам, которые совместно используют один и тот же компонент

Question

У меня есть несколько дочерних компонентов, которые совместно используют один и тот же компонент, который работает нормально, однако я не могу маршрутизировать между страницами, поскольку кажется, что Angular подозревает, что компонент уже загружен. Можно ли перезагрузить компонент при попытке маршрутизации к этим дочерним маршрутам?

const ServicesRouting: ModuleWithProviders = RouterModule.forChild([
    {
        path: '',
        component: StructureComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'services',
                canActivate: [AuthGuard],
                component: servicesComponent,
                children: [
                    {
                        path: 'one',
                        canActivate: [AuthGuard],
                        component: servicesComponent,
                    },
                    {
                        path: 'two',
                        canActivate: [AuthGuard],
                        component: servicesComponent,
                    },
                    {
                        path: 'three',
                        canActivate: [AuthGuard],
                        component: servicesComponent,
                    },
                    {
                        path: 'four',
                        canActivate: [AuthGuard],
                        component: servicesComponent,
                    }
                ]
            }
        ]
    }
]);

Answer 1

Вы можете использовать runGuardsAndResolvers .
Например попробуйте это:

{
        path: '',
        component: StructureComponent,
        canActivate: [AuthGuard],
        runGuardsAndResolvers: 'always'
        children: [...]
}

Answer 2

Сначала вы должны создать одну и ту же страницу для каждого маршрута и использовать такие параметры: path: 'home/:id'.

Это не решит твою проблему. Вы должны использовать RXJS там. Например:

this.route.paramMap .pipe( map((paramMap) => Number.parseInt(paramMap.get('id') || '1', 10)), switchMap((id) => this.myService.getData(id)) ).subscribe((data) => this.data = data);

this.route.paramMap - это Наблюдаемая, на которую вы можете подписаться.