在 Angular 4/5 和 TypeScript 中重新加载同一页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49592063/
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
Reloading same page in Angular 4/5 & TypeScript
提问by abhinav3414
I am developing a one page application with the help of routes:
我正在借助路由开发单页应用程序：
this.router.navigate(['/customer-home'], { skipLocationChange: true });
When I am at the above page, I am adding a customer using a REST call. After the customer gets updated, I want my page to refresh and reload the /customer-homepage view.
当我在上面的页面时，我正在使用 REST 调用添加一个客户。客户更新后，我希望我的页面刷新并重新加载/customer-home页面视图。
My method looks like below :
我的方法如下所示：
addNewCustomer(customer) {
this.dataService.postEntity('customers', customer);
location.reload();
}
The problem is that location.reloadrefreshes the page and redirects to home page.
问题是location.reload刷新页面并重定向到主页。
I have done a console log for the location:
我已经完成了该位置的控制台日志：
Location?{replace: ?, assign: ?, href: "http://localhost:4200/", ancestorOrigins: DOMStringList, origin: "http://localhost:4200",?…}
Is there any way, I can reload my page and data using routes, and I do not want to show the URL in address bar.
有什么办法，我可以使用路由重新加载我的页面和数据，我不想在地址栏中显示 URL。
PS I have already tried redirecting to some other component and then coming back to current component, but it does not reloads the data and does not shows latest added customer.
PS 我已经尝试重定向到某个其他组件，然后返回到当前组件，但它不会重新加载数据，也不会显示最新添加的客户。
采纳答案by Gustavo Lopes
Using Location.reload in a Single Page Application does the opposite of what a SPA intends to do.
在单页应用程序中使用 Location.reload 与 SPA 的意图相反。
It seems you're trying to reload the page for getting the new data from your server.
您似乎正在尝试重新加载页面以从您的服务器获取新数据。
Loading the data shouldn't be the Router job. Instead of reloading the page, you should request the data after the insertion or on the callback of your postEntitymethod.
加载数据不应该是路由器的工作。您应该在插入后或在您的postEntity方法回调时请求数据，而不是重新加载页面。
Although, better than requesting data again, you should simply add the Entity to the latest added customers array or whatever you use to hold the data.
虽然比再次请求数据更好，但您应该简单地将实体添加到最新添加的客户数组或用于保存数据的任何内容。
回答by Nolan Walker
You could use the router service to redirect/reload to your customer page if that is what you are looking to do for some reason.
如果出于某种原因，这是您要执行的操作，则可以使用路由器服务重定向/重新加载到您的客户页面。
addNewCustomer(customer) {
this.dataService.postEntity('customers', customer);
this.router.navigate(['/customer-home']);
}
But I would suggest taking everyone else's suggestions and use Observables or Promises to reload your data instead of the entire page. The Observable should look something like so, provided below and I would suggest having your Post method return the customer after updating it.
但我建议采纳其他人的建议并使用 Observables 或 Promises 重新加载您的数据而不是整个页面。Observable 应该看起来像下面提供的那样，我建议让您的 Post 方法在更新后返回客户。
addNewCustomer(customer) {
this.dataService
.postEntity('customers', customer)
.subscribe(
update => this.customer = update;
err => console.log(err);
)
}
