单击上一页中的按钮后，如何在路由到该页面后刷新页面 [英] How to refresh the page after routing to that page on click of a button from previous page

问题描述

我有2页，一个主页，第二页.当我单击主页上的按钮时，它会路由到page2.现在，单击主页上的按钮后，当我进入第2页时，应该刷新一下，因为我的项目中存在某些缓存问题.我在ngoninit上添加了window.location.reload()，但是在这里我的页面一直在刷新.这是下面的代码.

I have 2 pages, one home and page2. when I click a button on home page it is routing to page2. Now after clicking the button on home,when I comes to page2 it should be refresh,since there is some cache issue in my project. I added the window.location.reload() on ngoninit,but here my page is continuously refreshing. Here is the code below.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-home',
  template: '<button (click)="gonextPage()">Go to next page</button>',
  styleUrls: ['./home.component.css']
})

export class HomeComponent implements OnInit {
imageSource :any;
statusdata1: any;
moreThanTen:boolean = false;
showit:boolean = false;
groupList:any = [];

constructor(private router: Router) { }
gonextPage(){
this.router.navigateByUrl('/page2');    
}
  ngOnInit() {
     // window.location.reload();
    /* First data */
    let response = 
    {"vehicle_number":1,"vehicle_name":"car","status":"yellow"}
    let response1 = {"vehicle_number":0,"vehicle_name":"car","status":"yellow"}
    let response2 = {"vehicle_number":2,"vehicle_name":"car","status":"yellow"}
    this.groupList.push(response,response1,response2);
    console.log(this.groupList);




  }

}

page2.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-page2',
  template: '',
  styleUrls: ['./page2.component.css']
})

export class page2Component implements OnInit {
imageSource :any;
statusdata1: any;
moreThanTen:boolean = false;
showit:boolean = false;
groupList:any = [];

constructor(private router: Router) { }

  ngOnInit() {
     window.location.reload();
    /* First data */
    let response = 
    {"vehicle_number":1,"vehicle_name":"car","status":"yellow"}
    let response1 = {"vehicle_number":0,"vehicle_name":"car","status":"yellow"}
    let response2 = {"vehicle_number":2,"vehicle_name":"car","status":"yellow"}
    this.groupList.push(response,response1,response2);
    console.log(this.groupList);




  }

}

推荐答案

我删除了先前编辑过的答案，因为它被欺负了.唯一的方法是使用即使重新加载js时仍保留的信息(在window.location.reload();上)，因为所有其他信息都将丢失.您可以使用localStorage(与localStorage.setItem('firstReload'，'true');)一起使用.

I remove the previous edited answer because it is bullied. The only way is to use an information that persists even when reloading the js (on window.location.reload();), because all the rest of the information would be lost. You can use the localStorage (with localStorage.setItem('firstReload', 'true'); ).

  ngOnInit() {
    if (!localStorage.getItem('firstReload') || localStorage.getItem('firstReload') == 'true') {
      localStorage.setItem('firstReload', 'false');
      window.location.reload();
    } else {
      localStorage.setItem('firstReload', 'true');
    }
  }

这里有一个有效的修改示例: https://stackblitz.com/edit/angular-correct-routing?file = src％2Fapp％2Fpage.component.ts

Here a working modified example: https://stackblitz.com/edit/angular-correct-routing?file=src%2Fapp%2Fpage.component.ts

这篇关于单击上一页中的按钮后，如何在路由到该页面后刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！