title: Angular 2: redirect single route to multiple components (4)
body: <p>I have a dashboard page with a list of entities in a table. On clicking a entity i navigate to the entity's details page/view using routerLink directive. On that page he can add new records and also view existing records.</p>
  
  <p>The shape of these entities/objects are different so the entity "detail" page would require different logic for forms and displaying records etc for the entities. However these fall into roughly 4 categories, so i have 4 different components to handle 4 different "shapes". </p>
  
  <p>Now i am looking for a clean, generic way to intercept and divert a single route definition to these 4 components, i cannot hardcode it in the dashboard entity list table because it will be loaded on the fly:</p>
  
  <p>Possible directions (from my understanding)</p>
  
  <ul>
  <li><p>Maybe build a shell component, subscribe to route params and then maintain a mapping of which entity should be directed at which of the 4 components. i.e entity 4,6,7 goto entity.detail.componentA. Then, call router.navigate to the required component.</p></li>
  <li><p>use a single component and fetch the entity records, check shape and display accordingly. This will make a bulky component with lots of ng-if in template for showing the correct view.</p></li>
  </ul>
  
  <p>-use a single shell component and include the 4 component selector in the shell template i.e.Disable/enable components based on view using ng-if's and flags.</p>
  
  <p>If somebody has gone through a similar problem, please share your views.</p>
  
  <p>Current route looks like this:</p>
  
  <pre><code>export const appRoutes: Routes = [
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'entity-details/:id', component: EntityDetailsComponent }
  ];
  </code></pre>