CODEWITHSUNDEEP
angular
Samir Boulos
Samir Boulos

Reputation: 441

Angular component keeps refreshing on its own and I lose state

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.

Upvotes: 2

Views: 4375

Answers (1)

Aravind
Aravind

Reputation: 41533

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

Upvotes: 2

Related Questions