CODEWITHSUNDEEP
angulartypescriptangular6angular-routing
Zander17
Zander17

Reputation: 1954

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

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,
                    }
                ]
            }
        ]
    }
]);

Upvotes: 0

Views: 1204

Answers (2)

Marc
Marc

Reputation: 234

You can use runGuardsAndResolvers.
For example try this : 

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

Upvotes: 1

KevinTale
KevinTale

Reputation: 1858

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.

Upvotes: 2

Related Questions