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

Question

我有一个用于编辑用户的页面,里面有一些子组件.每个子组件都可以更改或对其父组件执行某些操作.

因此,我没有将更改发送到父级并更新某些字段,而是使用"重新加载"当前页面

private route: ActivatedRoute;

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

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

但似乎角度不会重定向/重新加载相同的页面 router.navigate

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

编辑:

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

Answer 1

如果您只需要刷新整个页面，这是最简单的解决方案

   refreshPage() {
    window.location.reload();
   }

Answer 2

无需指定路径，您可以执行以下操作：

constructor(private route: ActivatedRoute, private router: Router) { }

reload() {
  this.router.routeReuseStrategy.shouldReuseRoute = () => false;
  this.router.onSameUrlNavigation = 'reload';
  this.router.navigate(['./'], { relativeTo: this.route });
}

如果您使用查询参数，您可以执行以下操作：

reload() {
  ...
  this.router.navigate(['./'], { relativeTo: this.route, queryParamsHandling: 'preserve' });
}

Answer 3

它将100%工作.我在我的代码中使用了这个.

load(val) {
if (val == this.router.url) {
  this.spinnerService.show();
  this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };
 }
}

这是我如何使用的示例.在代码中使用以下部分

this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };

Answer 4

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

Angular Router现在提供策略配置，以告诉Router在您导航至此用户在本GitHub问题中建议的相同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']);
}

当然，您必须首先注入Router组件的构造函数：

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

和@Abhiz所指出的一样，您必须设置shouldReuseRoute，仅由路由器本身配置页面重新加载就无法使用此方法。

我之所以使用了箭头功能，shouldReuseRoute是因为新的TSLint规则不允许使用非箭头功能。

Answer 5

我已经通过这种方式解决了

import { Router, ActivatedRoute } from '@angular/router';

constructor(private router: Router
          , private activeRoute: ActivatedRoute) {

}
reloadCurrentPage(){
   let currentUrl = this.router.url;
   this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
   this.router.navigate([currentUrl]);
   });
 }

Answer 6

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();
  }
}