角度2：在同一路线上重定向时再次重新加载同一组件

Posted 2023-02-22

【中文标题】角度2：在同一路线上重定向时再次重新加载同一组件

【英文标题】：angular 2: Reload same component again when redirect on the same route

【发布时间】：2018-02-03 03:18:02

【问题描述】：

我正在使用“routerLink”来导航我的路线，它工作正常。但是当我再次单击同一个按钮时，我希望该组件将再次加载。但目前，它不适用于 angular2。

app.component.html

<ul class="nav navbar-nav navbar-right">
            <li><a [routerLink]="['/events']" routerLinkActive="active" [routerLinkActiveOptions]="exact:true">All Events</a></li>
            <li><a [routerLink]="['/events/new']" routerLinkActive="active" [routerLinkActiveOptions]="exact:true">Create New</a></li>
</ul>

我想要，当我一次又一次地点击“所有事件”选项卡时，事件组件每次都会加载。

如何在angular2中实现这个场景？

【问题讨论】：

为什么要一次又一次地加载同一个组件？

请看这篇类似***.com/questions/47855240/…的帖子

【参考方案1】：

我想要，当我一次又一次点击“所有事件”选项卡时，事件组件每次都会加载。

这是 angular2 中的 Not Possible，原因是一旦您加载任何组件，该组件只有在您再次从另一条路线导航到该路线时才会重新加载。

但你可以强制重新加载

基本上有两种方法

可以根据需要反复调用ngOnInit()方法，不推荐使用这种方式

您可以从ngOnInit() 调用一个常用方法，然后根据需要再次调用该函数，像这样

ngOnInit()
    this.callingFunction();


forLaterUse()
    this.callingFunction(); 

另一种方法是，如果您想在参数更改时加载相同的组件，您可以在构造函数中使用它

this.route.params.subscribe((params: Params) => 
    console.log(params); 
    this.callingFunction();
    // this will be called every time route changes
    // so you can perform your functionality here

);

【讨论】：

这是一个不同的问题，现在刚刚出现，是否有机会限制加载组件从其他路线导航到同一路线？。

【参考方案2】：

下面的这个github链接有正确的解决方案 https://github.com/angular/angular/issues/13831

将下面的代码放入你要加载的组件的构造函数中

this.router.routeReuseStrategy.shouldReuseRoute = function () 
  return false;
;

this.router.events.subscribe((evt) => 
  if (evt instanceof NavigationEnd) 
    this.router.navigated = false;
    window.scrollTo(0, 0);
  
);

【参考方案3】：

请看这里：How to reload the current route with the angular 2 router

总而言之-它不是路由器内置的功能。听起来最好的选择是使用可以刷新或重新获取任何相关数据的服务，如果有任何变化，Angular 会自动更新视图。

如果有人说某些事情在 Angular 中是不可能的，那几乎总是不正确的。使用当前现有的解决方案是不可能的。 ;-)

【讨论】：

If someone says something is not possible in Angular, that is almost always not true 伙计，但根据场景，它不可能以角度的方式。

是的，我只是厚脸皮。 :-p。毕竟你确实提供了解决方案