如何以正确的方式在Angular 8中重新加载页面 [英] How to reload a page in Angular 8 the proper way

问题描述

NB.我从谷歌搜索中得到了一系列结果，但是，正如我最后解释的那样，由于多样性，我觉得它们并不可靠.

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

I have two utility methods - one for navigating to the parent node and one for reloading self. The first one works as supposed to, while the other one fails to cause the reload.

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 =" 等.似乎没有任何东西可以给我所需的重载.

I followed the answer here, with the only exception that I'd like my path navigated to, to be generic, not hard-coded. I've tried passing different parameters, like self="." and self="" etc. Nothing seems to give me the desired reload.

我想念什么?

我也尝试从传递给服务方法的 route 中挑选零件，但我只看到了一堆可观察的东西，而不是实际的部分.当然， this.router.navigate(route)只会引起错误.

I also tried to pick the parts from the route passed into the service's method but I only see a bunch of observables, not the actual segments. And, of course, this.router.navigate(route) only caused an error.

Google搜集了很多提示，并给出了各种各样的建议(例如

Googling produced a lot of hints with vastly varying suggestions (e.g. this), which leads me to the suspicion that it might be heavily dependent on the version (I'm on 8.0) and, also, that many of the suggestions, although accepted, might be misleading and more harmful in the long run, without me realizing it.

推荐答案

您可以在此 更新首先，做 window.location.reload()完全违背了Single-Page-Application的性质.相反，您可以在实际单击该链接时重新加载特定的组件..因此，要完成此任务，我们需要有角形路由器.对于特定的组件重新加载，您可以一次在主 app.component.ts 中推送这行代码，以进行完整的应用程序.

Update First of all doing window.location.reload() is totally against of Single-Page-Application nature. rather, You can reload particular component when actually clicking on that link.. so, to do this task we have angular router. For particular component reload you can push this line of code in main app.component.ts once for full application.

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;
      }
    }); 
 }

以上代码，我们将订阅到 router-events .然后我们检查每个 router-NavigationEnd 事件，然后仅告诉路由器，忘记将路由器的当前导航添加到其自身的历史记录中.因此，每次我们每次尝试重新加载同一组件时，每个事件仅针对该特定组件触发，那就是SPA.

above code we are going to subscribing to router-events. and then we are checking each and every router-NavigationEnd event, then just telling router, forget to add current navigation of router to its own history. So, each time whenever we are trying to reload same component each and every events are firing for that particular component only, thats a SPA.

在 ngOnDestroy()的 app.component.ts 中，当组件被破坏时，我们必须取消订阅路由器事件.

IN app.component.ts of ngOnDestroy() we have to unsubscribe from router events, when component is destroyed.

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

现在，例如，您拥有主页和详细信息"组件或该组件的任何其他组件……您可以通过调用 this.router.navigate([this.router.url]) this重新加载每个组件将重新加载所有当前组件.例如，在 home组件中，我们具有 reload-button ，并且其中的click事件我们只是调用 this.router.navigate([this.router.url]).细节组件也是如此..或任何其他组件.

Now, for example you have Home and Details component or anything else of component... You can reload each component by calling this.router.navigate([this.router.url]) this will reload all current component. for example, In home component we have reload-button and click event of that we are just calling this.router.navigate([this.router.url]). same for details component too.. or any other component..

Home.component.ts

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

Details.component.ts

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

您可以签入以上更新的StackBlitz链接，其中包括完整的路由器状态重载的所有重载工作示例.在浏览器控制台中，单击按钮 reload()可以看到组件的每个事件.

You can check in updated above StackBlitz link, all working example of reloading with full router-state reloading. In browser console see each and every events of component is firing by clicking button reload().

这篇关于如何以正确的方式在Angular 8中重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！