Introduction to the method of refreshing the current page in Angular (with examples)

This article brings you code examples about PHP queue implementation. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

onSameUrlNavigation

OnSameUrlNavigation is provided from angular5.1 onwards to support route reloading. ,

 has two values ​​'reload' and 'ignore'. Defaults to 'ignore'

Defines what the router should do when it receives a request to navigate to the current URL. By default, the router will ignore this navigation. But this will prevent features like the "refresh" button. Use this option to configure behavior when navigating to the current URL.

Use

to configure onSameUrlNavigation

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

 reload will not actually reload the route, but just re-initiate the event mounted on the router.

Configuring runGuardsAndResolvers

  runGuardsAndResolvers has three values:

• paramsChange: Triggered only when routing parameters change. For example, the id in /reports/:id changes

• paramsOrQueryParamsChange: Triggered when routing parameters change or training parameters change. For example, if the id or page attribute in /reports/:id/list?page=23 changes

• always: always trigger the

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'report-list', component: ReportListComponent },
      { path: 'detail/:id', component: ReportDetailComponent, runGuardsAndResolvers: 'always' },
      { path: '', redirectTo: 'report-list', pathMatch: 'full' }
    ]
  }
];

component listening router.events

import {Component, OnDestroy, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {Report} from '@models/report';
import {ReportService} from '@services/report.service';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';

@Component({
  selector: 'app-report-detail',
  templateUrl: './report-detail.component.html',
  styleUrls: ['./report-detail.component.scss']
})
export class ReportDetailComponent implements OnInit, OnDestroy {
  report$: Observable<Report>;
  navigationSubscription;

  constructor(
    private reportService: ReportService,
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.navigationSubscription = this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.initLoad(event);
      }
    });
  }

  ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    this.report$ = this.reportService.getReport(id);
  }

  ngOnDestroy(): void {
    // 销毁navigationSubscription，避免内存泄漏
    if (this.navigationSubscription) {
      this.navigationSubscription.unsubscribe();
    }
  }

  initLoad(e) {
    window.scrollTo(0, 0);
    console.log(e);
  }
}

The above is the detailed content of Introduction to the method of refreshing the current page in Angular (with examples). For more information, please follow other related articles on the PHP Chinese website!