How to load Angular components using router-outlet

user_1107049 0
Viewed 48

The Product component page isn't updated if Product 2 Component is clicked after Product 1 Component. I have to click Hello Component and only then Product 2 Component to make sure Product component page is updated with the ID number.

By other words, the Product component is only updated if I click:

  1. Product 1 Component
  2. Hello Component
  3. Product 2 Component

enter image description here

How to fix the problem? Here is the Stackblitz project:

https://stackblitz.com/edit/angular-ivy-insynj?file=src%2Fproduct%2Fproduct.component.ts

angular typescript router components
1 Answers

Demo Normally it is working . Your missing is that you can't redirect in same component. That is why you thought wrongly. give function to each click and

<nav> 
  <a  class="btn btn-tab" (click)="onChange('/hello')">Hello Component</a>  
  <a  class="btn btn-tab"(click)="onChange('/product/1')">Product 1 Component</a>
  <a  class="btn btn-tab"(click)="onChange('/product/2')">Product 2 Component</a>
</nav>
<router-outlet></router-outlet>

use this in component.ts

constructor(private _router:Router){}
onChange(param){
  this._router.routeReuseStrategy.shouldReuseRoute = () => false;
  this._router.onSameUrlNavigation = 'reload';
  this._router.navigate([param]);
}
user_25762540
Related