I have a view in which part of it loads another within using routing. Here is the part that loads another:
<a href="/productDetails/{{product.ProductId}}">{{product.Name}}</a>
And here is the div where I have my other component (productDetails) getting loaded:
<div class='col-md-6 body-content'>
<router-outlet></router-outlet>
</div>
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.
You should be using routeLink attribute instead of href
<a [routerLink]="['/productDetails', product.ProductId]">{{product.Name}}</a>
Update your route defintion as
{path: 'productDetails/:ProductId', component: ProductDetailsComponent