如何使用 router-outlet 加载 Angular 个组件

Question

如果在 Product 1 Component 之后单击 Product 2 Component，Product component 页面不会更新。我必须单击 Hello Component，然后才单击 Product 2 Component 以确保 Product component 页面更新为 ID 号。

换句话说，Product 组件仅在我单击时更新：

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

如何解决这个问题？这是 Stackblitz 项目：

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

Answer 1

Demo正常工作。你缺少的是你不能在同一个组件中重定向。这就是为什么你想错了。赋予每次点击功能和

<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>

在component.ts

中使用这个

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