如何使用路由器插座加载 Angular 组件

Posted 2023-02-23

【中文标题】如何使用路由器插座加载 Angular 组件

【英文标题】：How to load Angular components using router-outlet

【发布时间】：2020-10-03 13:20:07

【问题描述】：

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

换句话说，Product 组件只有在我点击时才会更新：

Product 1 Component Hello Component Product 2 Component

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

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

【参考方案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]);