如何使用 angular 或 javascript 重新加载页面

Question

我需要在路由到新组件后重新加载页面

我试过 location.reload() 选项，但它继续重新加载而不停止

ngOninit(){
location.reload()
}

预期结果 ：

我只需要重新加载页面一次

实际结果 ：

它重新加载了很多次

Answer 1

我不明白你的用例，但有很多方法可以制作你想要的东西。

我建议你使用 localStorage 的方法。

检查 localStorage 是否存在。 默认情况下，该键不存在，因此您也可以创建它并重新加载页面。
刷新后，您检查相同的密钥（现在存在）。 所以你下次不要重新加载页面并删除密钥

ngOnInit() {
  if (!localStorage.getItem('foo')) { 
    localStorage.setItem('foo', 'no reload') 
    location.reload() 
  } else {
    localStorage.removeItem('foo') 
  }
}

Answer 2

您应该在变量中保存（例如）“IsLoadedBefore”布尔值，并在重新加载页面之前检查它。 但是一个在页面重新加载后保留数据的变量！ （不是本地的）
localStorage是一个不错的选择：

function reloadIfNecessary() {
var isLoadedBefore = localstorage.getItem("IsLoadedBefore");
if(isLoadedBefore=="true")
   return;
}
else {
localstorage.setItem("IsLoadedBefore",true);
/*use your reload method*/
})

Answer 3

如果你想重新加载子组件使用 this.ngOnInit(); （在可能被刷​​新的子组件上）只重新加载这个子组件。

父组件.ts

@ViewChild(ChildComponent) child: ChildComponent;
refreshed = false;
ngAfterViewInit() {
  if (!refreshed)
     this.child.refresh()
  refreshed = true;
}

子组件.ts

refresh() {
   this.ngOnInit()
}

Answer 4

你可以导入位置

constructor(location: Location)

然后调用 reload 方法重新加载页面

this.location.reload()

Answer 5

创建一个服务来存储之前的路由。 如果它有路由或您在条件中定义的路由，则获取组件中的先前路由，然后重新加载。

import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Injectable()
export class PreviousRouteService {

  private prev: string;
  private curr: string;

  constructor(private router: Router) {
    this.currentUrl = this.router.url;
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {        
        this.prev = this.curr;
        this.curr = event.url;
      };
    });
  }

  public getPreviousUrl() {
    return this.prev;
  }    
}

在您的组件中使用它：

ngOninit(){
  if (this.previousRouteService.getPreviousUrl() {
    location.reload()
  }
}

使用服务作为提供者并在构造函数中实例化它。

constructor(private previousRouteService: PreviousRouteService){}

Answer 6

在这里您可以使用如下所示的本地存储

ngOnInit(){
 const firstTime = localstorage.getItem('key')
 if(!firstTime){
  localstorage.setItem('key','loaded')
  location.reload()
 }else {
   localStorage.removeItem('key') 
 }
}

Answer 7

在javascript中，您可以使用

location.reload()

用于页面重新加载