Introduction à la méthode de rafraîchissement de la page courante dans Angular (avec exemples)

Cet article vous apporte des exemples de code sur l'implémentation de la file d'attente PHP. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

onSameUrlNavigation

OnSameUrlNavigation est fourni à partir d'angular5.1 pour prendre en charge le rechargement d'itinéraire. ,

 a deux valeurs 'reload' et 'ignore'. La valeur par défaut est « ignorer »

  Définit ce que le routeur doit faire lorsqu'il reçoit une demande de navigation vers l'URL actuelle. Par défaut, le routeur ignorera cette navigation. Mais cela empêchera des fonctionnalités telles que le bouton « Actualiser ». Utilisez cette option pour configurer le comportement lors de la navigation vers l'URL actuelle.

Utilisez

pour configurer onSameUrlNavigation

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

le rechargement ne rechargera pas réellement l'itinéraire, mais relancera simplement l'événement monté sur le routeur .

Configurer runGuardsAndResolvers

RunGuardsAndResolvers a trois valeurs :

• paramsChange : déclenché uniquement lorsque les paramètres de routage changent. Par exemple, dans /reports/:id, id changes

• paramsOrQueryParamsChange : déclenché lorsque les paramètres de routage changent ou que les paramètres d'entraînement changent. Par exemple, le changement d'attribut id ou page dans /reports/:id/list?page=23

• always : toujours déclenche

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

Le composant écoute 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);
  }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!