title: Angular component keeps refreshing on its own and I lose state
body: <p>I have a view in which part of it loads another within using routing. Here is the part that loads another:</p>
  
  <pre><code>&lt;a href="/productDetails/{{product.ProductId}}"&gt;{{product.Name}}&lt;/a&gt;
  </code></pre>
  
  <p>And here is the div where I have my other component (productDetails) getting loaded:</p>
  
  <pre><code>&lt;div class='col-md-6 body-content'&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That works fine. But, whenever the component gets loaded, the hosting component refreshes itself and I lose its state. I don't know why this behaviour is happening because I coded the same app in AngularJS and it works as expected.  </p>