如何以正确的方式在 Angular 8 中重新加载页面

Question

注意。我有一组来自谷歌搜索的结果，但正如我最后解释的那样，由于多样性，我觉得它们不可靠。

我有两种实用方法 - 一种用于导航到父节点，另一种用于重新加载自身。第一个按预期工作，而另一个未能导致重新加载。

navigateToParent(route: ActivatedRoute) {
  const options: NavigationExtras = { relativeTo: route };
  this.router.navigate([".."], options);
}

navigateToSelf(route: ActivatedRoute) {
  this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  this.router.onSameUrlNavigation = "reload";
  const self = ".";
  this.router.navigate([self]);

  // const options: NavigationExtras = { relativeTo: route };
  // this.router.navigate(["."], options);
}

我遵循了答案，唯一的例外是我希望导航到的路径是通用的，而不是硬编码的。我试过传递不同的参数，比如 self="." 和 self="" 等。似乎没有什么能给我所需的重新加载。

我错过了什么？

我还尝试从路由中选择部分传递给服务的方法，但我只看到一堆可观察值，而不是实际的段。当然，this.router.navigate(route) 只会导致错误。

谷歌搜索产生了很多提示，建议各不相同（例如），这让我怀疑它可能严重依赖于版本（我使用的是 8.0），而且，许多建议虽然被接受，但在我没有意识到的情况下运行可能会产生误导，并且在很长一段时间内危害更大。

Answer 1

您可以在此处找到完整的工作示例 StackBlitz Link

更新首先做 window.location.reload() 是完全违反单页应用程序性质的。相反，您可以在实际单击 link 时重新加载特定组件。因此，要完成此任务，我们有 angular 路由器。对于特定的组件重新加载，您可以将这行代码推送到 main app.component.ts 一次以进行完整应用。

mySubscription;

 constructor(private router: Router, private activatedRoute: ActivatedRoute){
    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
    this.mySubscription = this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
         // Trick the Router into believing it's last link wasn't previously loaded
         this.router.navigated = false;
      }
    }); 
 }

以上代码我们将subscribing到router-events。然后我们检查每个 router-NavigationEnd 事件，然后告诉路由器，忘记将路由器的当前导航添加到它自己的历史记录中。因此，每当我们尝试重新加载相同的组件时，每个事件都只针对该特定组件触发，这就是一个 SPA。

IN app.component.ts of ngOnDestroy() 我们必须在组件被销毁时取消订阅路由器事件。

ngOnDestroy(){
  if (this.mySubscription) {
    this.mySubscription.unsubscribe();
  }
}

现在，例如您有 Home 和 Details 组件或任何其他组件...您可以通过调用 this.router.navigate([this.router.url]) 重新加载每个组件，这将重新加载所有当前组件。例如，在 home component 中我们有 reload-button 和我们刚刚调用的点击事件 this.router.navigate([this.router.url])。细节组件也一样..或任何其他组件..

Home.component.ts

reLoad(){
  this.router.navigate([this.router.url])
}

Details.component.ts

reLoad(){
  this.router.navigate([this.router.url])
}

您可以在 StackBlitz link 上面查看更新，所有使用完整路由器状态重新加载的工作示例。在浏览器控制台中，通过单击按钮 reload().

查看组件的每个事件都在触发

Answer 2

试试下面的方法。

this.ngOnInit();

它适用于我重新加载相同的路线。

Answer 3

在您的 app-routing-module.ts 上，请确认您有 {onSameUrlNavigation: 'reload'}

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
 exports: [RouterModule],
 })

Answer 4

要重新加载同一页面...试试这个

window.location.reload();

Answer 5

尝试以下操作：

imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })]

Answer 6

好的，下一个示例对我来说无需重新加载页面即可工作：

在您要添加的路由器组件上 'onSameUrlNavigation' router.component:

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
  exports: [RouterModule],
})

现在要重新加载组件

constructor(private router: Router){
  this.router.routeReuseStrategy.shouldReuseRoute = () => {
    return false;
  };
}

someFunction(){
  this.router.navigateByUrl('/route');
}

Answer 7

<button type="button" mat-raised-button color="warn" onclick="window.location.reload();">

Window.location.reload() onClick 属性

如何以正确的方式在 Angular 8 中重新加载页面

How to reload a page in Angular 8 the proper way

router

typescript

angular

angular8