title: Set child routing in angular 2
body: <p>I have an app which have different routes like Contact, Login, Edit, etc, here contact route has two child routes Spreadsheet &amp; TwoPanel, both shares common <code>top-nav</code>, <code>top-filters</code> &amp; many more. So whenever I hit <code>contact/spreadsheet</code> all those common components (top-nav, top-filter) gets reload, now if I hit <code>contact/two-panel</code> these common components reloads again which should not happen. So how I can prevent this. Below is my code:</p>
  
  <pre><code>{ 
      path: 'contact', component: ContactParent,
      children: [
          { path: '', redirectTo: 'spreadsheet', pathMatch: 'full' },
          { path: 'spreadsheet', component: Spreadsheet },
          { path: 'two-panel', component: TwoPanel }
      ]
  },
  { path: 'login', component: Login },
  { path: 'edit', component: EditSingleContact }
  </code></pre>
  
  <p>and here is parent components template:</p>
  
  <pre><code>&lt;!-- ContactParent template --&gt;
  &lt;top-nav&gt;&lt;/top-nav&gt;
  &lt;top-filter&gt;&lt;/top-filter&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  
  &lt;cancel-payment&gt;&lt;/cancel-payment&gt;
  &lt;delete-dialog&gt;&lt;/delete-dialog&gt;
  &lt;create-link&gt;&lt;/create-link&gt;
  &lt;message&gt;&lt;/message&gt;
  
  &lt;!-- main.html --&gt;
  &lt;main&gt;
       &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/main&gt;
  </code></pre>