use same component for different routes with different output
You can set route data and get the data in your component to show different output:
{ path: 'list', component: PhysicianComponent, data: { viewOption: 'list' } },
{ path: 'create', component: PhysicianComponent, data: { viewOption: 'create' } },
{ path: 'update/:id', component: PhysicianComponent, data: { viewOption: 'update' } },
In your component, get the data from ActivatedRoute.snapshot.data
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.viewOption = this.route.snapshot.data.viewOption;
}
Yes, by using the ActivatedRoute service and by that you check route parameters and router url to check which condition to apply but that is hard to maintain. Imagine, you just change the url or change the parameter name so you need to change that at the component. Another way is to add data property to each route something like a flag and based on that flag you apply specific conditions-
const routes: Routes = [
{
path: 'physician',
children: [
{ path: 'list', component: PhysicianComponent, data: { kind: 'list' } },
{ path: 'create', component: PhysicianComponent, data: { kind: 'create' } },
{ path: 'update/:id', component: PhysicianComponent, data: { kind: 'update' } },
{ path: 'view/:id', component: PhysicianViewComponent, date: { kind: 'view' } }
]
}
component:
ngOnInit() {
this.activeRoutedService.data.subscribe(data => {
switch (data.kind) {
//....
}
});
}