Question

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

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

来“重新加载”当前页面

private route: ActivatedRoute;

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

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

但是似乎有角不会用router.navigate重定向/重新加载同一页面

如何重新加载当前页面？

编辑：

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

Answer 1

它将工作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 2

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

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

Answer 3

不指定您可以执行的路径：

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 4

structure(list(SessionDate = structure(c(1L, 1L, 1L), .Label = c("07-16-2019", 
"07-23-2019", "07-30-2019"), class = "factor"), SessionTime = structure(c(1L, 
1L, 1L), .Label = c("11:46:03", "12:09:32", "13:12:03", "13:36:15", 
"17:01:32", "17:28:27"), class = "factor"), Subject = c(3L, 3L, 
3L), Sex = structure(c(1L, 1L, 1L), .Label = "male", class = "factor"), 
    Age = c(23L, 23L, 23L), Handedness = structure(c(1L, 1L, 
    1L), .Label = "right", class = "factor"), preOrpost = c("PRE", 
    "PRE", "PRE"), Site = c("RIGHT", "RIGHT", "RIGHT"), Condition = structure(c(2L, 
    2L, 2L), .Label = c("EMOPRAC", "EMOstim", "GENDPRAC", "GENDstim"
    ), class = "factor"), Duration = c(300L, 40L, 40L), Correct = c(2L, 
    2L, 1L), FACE.RESP = c("1", "1", "1"), SCRAM1.RESP = c(NA, 
    NA, NA), SCRAM2.RESP = c(NA, NA, NA), SCRAM3.RESP = c(NA, 
    NA, NA), SCRAM4.RESP = c(NA, NA, NA), SCRAM5.RESP = c(NA, 
    NA, NA), SCRAM6.RESP = c(NA, NA, NA), SCRAM7.RESP = c(NA, 
    NA, NA), SCRAM8.RESP = c(NA_character_, NA_character_, NA_character_
    ), SCRAM9.RESP = c(NA_character_, NA_character_, NA_character_
    ), SCRAM10.RESP = c(NA_character_, NA_character_, NA_character_
    ), SCRAM11.RESP = c(NA_character_, NA_character_, NA_character_
    ), SCRAM12.RESP = c(NA_character_, NA_character_, NA_character_
    ), RESPOND.ACC = c(1L, 0L, 1L), RESPOND.RESP = c("1", "0", 
    "1"), WHITE4.RESP = c(NA, NA, NA), FACE.RT = c(NA_integer_, 
    NA_integer_, NA_integer_), SCRAM1.RT = c(NA_integer_, NA_integer_, 
    NA_integer_), SCRAM2.RT = c(NA_integer_, NA_integer_, NA_integer_
    ), SCRAM3.RT = c(NA_integer_, NA_integer_, NA_integer_), 
    SCRAM4.RT = c(NA_integer_, NA_integer_, NA_integer_), SCRAM5.RT = c(NA_integer_, 
    NA_integer_, NA_integer_), SCRAM6.RT = c(NA_integer_, NA_integer_, 
    NA_integer_), SCRAM7.RT = c(NA_integer_, NA_integer_, NA_integer_
    ), SCRAM8.RT = c(NA_integer_, NA_integer_, NA_integer_), 
    SCRAM9.RT = c(NA_integer_, NA_integer_, NA_integer_), SCRAM10.RT = c(NA_integer_, 
    NA_integer_, NA_integer_), SCRAM11.RT = c(NA_integer_, NA_integer_, 
    NA_integer_), SCRAM12.RT = c(NA_integer_, NA_integer_, NA_integer_
    ), RESPOND.RT = c(251L, 1111L, 426L), WHITE4.RT = c(NA_integer_, 
    NA_integer_, NA_integer_)), row.names = c(NA, 3L), class = "data.frame")

Answer 5

因为它是相同的组件。您可以通过注入ActivatedRoute来侦听路由更改，并对参数和查询参数的更改做出反应，或者可以更改默认的RouteReuseStrategy，以便在破坏组件时将其销毁并重新渲染。 URL更改而不是重复使用。

Answer 6

通过这种方式，我们也可以保留查询参数

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

Answer 7

我是这样解决的

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 8

使用 angular 11，你可以使用这个：

在路由配置中添加 runGuardsAndResolvers: 'always'

const routes: Routes = [
  { path: '', component: Component, runGuardsAndResolvers: 'always' },
];

这是您重新加载的方法：

  reloadView(): void {
    this.router.navigated = false;
    this.router.navigate(['./'], { relativeTo: this.route });
  }

这将触发该配置上的任何解析器

Answer 9

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

Angular路由器现在提供策略配置，以告知路由器，以防您导航到此用户在this GitHub issue中建议的相同URL。

首先，您可以配置设置路由器（路由器模块）时的操作。

Samsung

或者，如果您像我一样，不想更改整个路由器模块的行为，则可以使用以下方法/功能来实现：

Razer Phone 2

当然，您必须首先在组件的构造函数中注入@NgModule({ imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })], exports: [RouterModule] })：

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

以某种方式，正如@Abhiz 所指出的那样，您必须设置shouldReuseRoute ，仅通过配置路由器本身，页面重新加载就无法使用此方法。

我为<{1}使用了箭头功能，因为新的TSLint规则不允许使用非箭头功能。

Answer 10

我找到了比重新加载页面更好的方法。相反，我将重新加载刚刚更新的数据。这样更快n更好

Answer 11

并不是真正刷新页面，但认为它可以帮助其他人寻找简单的东西

ngOnInit(){
    startUp()
}

startUp(){
    // Codes
}

refresh(){
    // Code to destroy child component
    startUp()
}

Answer 12

这是简单的

if (this.router && this.router.url === '/') { or your current page url e.g '/home' 
    window.location.reload();
  } else {
    this.router.navigate([url]);
  }

Answer 13

我相信Angular 6具有BehaviorSubject对象。我下面的示例是使用Angular 8完成的，希望同样适用于Angular 6。

此方法是解决该问题的一种“更主动”的方法，并假定您正在使用并且对rxjs熟悉。

假设您在父组件（路由定义中使用的组件）中使用了Observable，那么您应该能够轻松地对数据流进行脉动。

我的示例还假设您正在组件中使用视图模型，就像这样...

vm$: Observable<IViewModel>;

在这样的HTML中...

<div *ngIf="(vm$ | async) as vm">

在您的组件文件中，添加一个BehaviorSubject实例...

private refreshBs: BehaviorSubject<number> = new BehaviorSubject<number>(0);

然后还添加一个可由UI元素调用的操作...

  refresh() {
    this.refreshBs.next(1);
  }

这是UI片段，一个材料引导按钮...

<button mdbBtn color="primary" class="ml-1 waves-dark" type="button" outline="true"
                    (click)="refresh()" mdbWavesEffect>Refresh</button>

然后，在您的ngOnIt函数中执行类似的操作，请记住，我的示例进行了简化，因此我不必提供很多代码...

  ngOnInit() {

    this.vm$ = this.refreshBs.asObservable().pipe(
      switchMap(v => this.route.queryParamMap),
      map(qpm => qpm.get("value")),
      tap(v => console.log(`query param value: "${v}"`)),

      // simulate data load
      switchMap(v => of(v).pipe(
        delay(500),
        map(v => ({ items: [] }))
      )),
      
      catchError(e => of({ items: [], error: e }))
    );
    
  }

Answer 14

请参阅此 stackblitz，它结合使用 RouteReuseStrategy 和 onSameUrlNavigation: 'reload' 路由器选项。

此策略确保 angular 在导航到它认为“相同”的路由（包括具有不同的路径和查询参数）时始终重新渲染组件。

@Injectable()
export class MyStrategy extends RouteReuseStrategy {
   shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null {
    return null;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }
}

const routes = [
  {path: '2', component: Empty2},
  {path: '', component: Empty},
];

@NgModule({
  imports:      [ BrowserModule, RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'}) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ], 
  providers: [{provide: RouteReuseStrategy, useClass: MyStrategy}]
})
export class AppModule { }

Answer 15

the below code helped me solve the above problem. 

Intent intent=new Intent(Intent.ACTION_SEND);
                    intent.setType("message/rfc822");
                    intent.setType("image/png");
                    intent.putExtra(Intent.EXTRA_EMAIL, new String[]{"abc@gmail.com"});
                    intent.putExtra(Intent.EXTRA_SUBJECT, "Identification");
                    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
                    intent.putExtra(Intent.EXTRA_STREAM, Uri.parse("file://"+mCurrentPhotoPath));
                    intent.putExtra(Intent.EXTRA_TEXT, str_mobile+","+str_mail);

                    try
                    {
                        startActivity(Intent.createChooser(intent,"Send mail..."));
 }
                    catch (android.content.ActivityNotFoundException e)
                    {
                        Toast.makeText(getActivity().getApplicationContext(),"THERE ARE NO EMAIL CLIENTS INSTALLED",Toast.LENGTH_LONG).show();
                    }

它将重定向到没有数据丢失的任何页面（即使是当前页面）。数据将保持不变。

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

15 个答案:

这是简单的