javascript - 如何重新加载当前页面？

Question

我有一个用于编辑用户的页面，里面有一些子组件。每个子组件都可以更改或对其父组件产生一些影响。

因此，我没有将更改发送给父级并更新某些字段，而是使用

对当前页面进行了“重新加载”

private route: ActivatedRoute;

reload(){
    this.router.navigate(["/admin/user/edit/"+this.user.id]);
}

基本上，它重定向到当前页面。例如，当前页面是 http://web.info/admin/user/edit/9它将被重定向到此页面，希望该页面内的所有数据都使用最新数据重新加载。

但似乎 Angular 不会使用 router.navigate

重定向/重新加载同一页面

我应该如何重新加载当前页面？

编辑:

这就是为什么我需要重新加载页面而不是手动更新当前页面上的数据的原因。我需要对其他组件进行更新，当我进行更新时，它会向历史组件添加一些内容。我需要同时刷新用户组件和历史记录组件，因为这两个组件都受到其他组件中更改的影响。

Answer 1

做这么简单的事情有点棘手，但没有运气尝试使用当前解决方案重新加载和重新创建整个父子组件。

Angular Router 现在提供策略配置来告诉 Router 在您导航到与此用户在 this GitHub issue 中建议的相同 URL 时该怎么做.

首先，您可以在设置路由器(您的路由器模块)时配置要执行的操作。

@NgModule({
   imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
   exports: [RouterModule]
})

或者，如果您像我一样不想更改整个路由器模块的行为，您可以使用如下方法/函数来完成:

reloadComponent() {
    this._router.routeReuseStrategy.shouldReuseRoute = () => false;
    this._router.onSameUrlNavigation = 'reload';
    this._router.navigate(['/same-route']);
}

当然你必须先在组件的构造函数中注入(inject)Router:

// import { Router } from '@angular/router';
...
constructor(private _router: Router){}
...

不知何故，正如@Abhiz 所指出的，您必须设置 shouldReuseRoute，仅通过自身配置路由器，页面重新加载不适用于此方法。

我为 shouldReuseRoute 使用了一个箭头函数，因为新的 TSLint 规则不允许非箭头函数。