angular - Angular6 Router navigate to multiple child routes that share the same component

Question

I have multiple child components that share the same component which works fine, however, I cannot route between the pages as it appears Angular suspects the component is already loaded. Is it possible to reload the component when attempting to route to these child routes?

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

You first have to create a same page for each route and use parameters like so : path: 'home/:id' .

It won't solve your problem though. You have to use RXJS there. For example :

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 is an Observable which you can subscribe to.