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

问题描述

注意.我通过谷歌搜索得到了一组结果，但正如我最后解释的那样，由于多样性，我觉得它们不可靠.

我有两种实用方法 - 一种用于导航到父节点，一种用于重新加载自身.第一个可以正常工作，而另一个则无法导致重新加载.

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.

谷歌搜索产生了很多提示，其中的建议千差万别(例如 this)，这让我怀疑它可能严重依赖于版本(我使用的是 8.0)，而且，许多建议虽然被接受，但可能具有误导性等等从长远来看是有害的，而我却没有意识到.

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.

推荐答案

您可以在此 StackBlitz 链接

更新首先，执行 window.location.reload() 完全违背单页应用程序的性质.相反，您可以在实际单击该链接时重新加载特定组件.. 所以，为了完成这项任务，我们有 angular router.对于特定的组件重新加载，您可以在主 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();
  }
}

现在，例如您有 Home 和 Details 组件或任何其他组件...您可以通过调用 this.router.navigate([this.router.url]) this 重新加载每个组件将重新加载所有当前组件.例如，在 home 组件 中，我们有 reload-button 和点击事件，我们只是调用了 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屋！