Javascript Angular 6 - 如何重新加载当前页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52389376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 - How to reload current page?
提问by nightingale2k1
I have a page for editing user, it has some children components inside. Each children components can change or doing some effect to its parent component.
我有一个用于编辑用户的页面，里面有一些子组件。每个子组件都可以对其父组件进行更改或产生一些影响。
So instead of emitting the changes to parent and updating some fields, I did a "reload" of the current page with
因此，我没有向父级发出更改并更新某些字段，而是使用了当前页面的“重新加载”
private route: ActivatedRoute;
reload(){
this.router.navigate(["/admin/user/edit/"+this.user.id]);
}
Basically, it redirects to the current page. For example, the current page is http://web.info/admin/user/edit/9it will be redirected to this page with the hope all the data inside that page reloaded with the newest data.
基本上，它重定向到当前页面。例如，当前页面是 http://web.info/admin/user/edit/9它将被重定向到此页面，希望该页面内的所有数据都重新加载为最新数据。
but it seems the angular won't redirect/reload the same page with the router.navigate
但似乎 angular 不会重定向/重新加载同一个页面 router.navigate
How I should reload a current page?
我应该如何重新加载当前页面？
Edit:
编辑：
Here is the reason why I need to reload the page instead of manually updating the data on the current page. I need to do updates on Other Component, when I did the update it will add something to History Component. I need to refresh the User Component and History Component together since both components affected by the changes in Other Component.
这就是为什么我需要重新加载页面而不是手动更新当前页面上的数据的原因。我需要对其他组件进行更新，当我进行更新时，它会向历史组件添加一些内容。我需要一起刷新用户组件和历史组件，因为这两个组件都受其他组件更改的影响。
回答by Daniel Díaz Astudillo
A little bit tricky to do something so simple but had no luck trying to reload and recreate the entire parent & child components with current solution.
做一些如此简单的事情有点棘手，但没有运气尝试使用当前解决方案重新加载和重新创建整个父和子组件。
Angular Router now provides strategy configuration to tell the Router what to do in case you navigate to the same URL as this user suggests in this GitHub issue.
Angular Router 现在提供了策略配置，以告诉 Router 在导航到该用户在此 GitHub 问题中建议的相同 URL 时该做什么。
First of all you can configure what to do while setting up the Router (your router module).
首先，您可以在设置路由器（您的路由器模块）时配置要执行的操作。
@NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
exports: [RouterModule]
})
Or, if you are like me and don't want to change the entire router module behaviour you can do it with a method/function like this:
或者，如果你像我一样不想改变整个路由器模块的行为，你可以使用这样的方法/函数来做到：
reloadComponent() {
this._router.routeReuseStrategy.shouldReuseRoute = () => false;
this._router.onSameUrlNavigation = 'reload';
this._router.navigate(['/same-route']);
}
Of course you have to first inject Routerin your component's constructor:
当然，您必须首先注入Router组件的构造函数：
// import { Router } from '@angular/router';
...
constructor(private _router: Router){}
...
Somehow and as pointed out by @Abhiz you have to set shouldReuseRoute, with just configuring the Router by itself the page reload doesn't work with this aproach.
不知何故，正如@Abhiz 所指出的，您必须设置 shouldReuseRoute，仅配置路由器本身，页面重新加载不适用于这种方法。
I've used an arrow functionfor shouldReuseRoutebecause new TSLint rules won't allow non-arrow functions.
我使用了箭头函数，shouldReuseRoute因为新的 TSLint 规则不允许非箭头函数。
回答by Abhiz
It will work 100%. The following lines of code are responsible for page reload in my project.
它将 100% 工作。以下代码行负责在我的项目中重新加载页面。
load(val) {
if (val == this.router.url) {
this.spinnerService.show();
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
}
}
Just use the following part in your code.
只需在您的代码中使用以下部分。
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
回答by Lazar Ljubenovi?
Because it's the same component. You can either listen to route change by injecting the ActivatedRouteand reacting to changes of params and query params, or you can change the default RouteReuseStrategy, so that a component will be destroyed and re-rendered when the URL changes instead of re-used.
因为它是同一个组件。您可以通过注入ActivatedRoute和响应参数和查询参数的更改来监听路由更改，或者您可以更改默认值RouteReuseStrategy，以便当 URL 更改而不是重新使用时，组件将被销毁并重新呈现。
回答by Crystal
import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
@Component({
selector: 'app-refresh-banner-notification',
templateUrl: './refresh-banner-notification.component.html',
styleUrls: ['./refresh-banner-notification.component.scss']
})
export class RefreshBannerNotificationComponent {
constructor(
@Inject(DOCUMENT) private _document: Document
) {}
refreshPage() {
this._document.defaultView.location.reload();
}
}
回答by brian
This is the most simple solution if you just need to refresh the entire page
如果您只需要刷新整个页面，这是最简单的解决方案
refreshPage() {
window.location.reload();
}
回答by Bharat chaudhari
Here is the simple one
这是一个简单的
if (this.router && this.router.url === '/') { or your current page url e.g '/home'
window.location.reload();
} else {
this.router.navigate([url]);
}
回答by nightingale2k1
I found a better way than reload the page. instead i will reload the data that just got updated. this way faster n better
我找到了比重新加载页面更好的方法。相反，我将重新加载刚刚更新的数据。这样更快更好
回答by Nate
Not really refreshing the page but thought it would help someone else out there looking for something simple
并没有真正刷新页面，但认为它会帮助其他人寻找简单的东西
ngOnInit(){
startUp()
}
startUp(){
// Codes
}
refresh(){
// Code to destroy child component
startUp()
}
回答by Jegatheepan
private router: Router
this.router.navigateByUrl(url)
It will redirect to any pages without data lost (even current page). Data will remain as is.
它将重定向到没有数据丢失的任何页面（甚至是当前页面）。数据将保持原样。
