Einführung in die Methode zum Aktualisieren der aktuellen Seite in Angular (mit Beispielen)

Dieser Artikel enthält Codebeispiele zur PHP-Warteschlangenimplementierung. Freunde in Not können darauf verweisen.

onSameUrlNavigation

OnSameUrlNavigation wird ab angle5.1 bereitgestellt, um das Neuladen von Routen zu unterstützen. ,

 hat zwei Werte „reload“ und „ignore“. Standardmäßig „ignorieren“

  Definiert, was der Router tun soll, wenn er eine Anfrage zum Navigieren zur aktuellen URL erhält. Standardmäßig ignoriert der Router diese Navigation. Dadurch werden jedoch Funktionen wie die Schaltfläche „Aktualisieren“ verhindert. Verwenden Sie diese Option, um das Verhalten beim Navigieren zur aktuellen URL zu konfigurieren.

Verwenden Sie

, um onSameUrlNavigation zu konfigurieren

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

reload lädt die Route nicht wirklich neu, sondern sendet nur das auf dem Router bereitgestellte Ereignis erneut aus.

runGuardsAndResolvers konfigurieren

RunGuardsAndResolvers hat drei Werte:

• paramsChange: Wird nur ausgelöst, wenn sich Routing-Parameter ändern. Beispielsweise ändert sich in /reports/:id die ID

• paramsOrQueryParamsChange: Wird ausgelöst, wenn sich Routing-Parameter oder Trainingsparameter ändern. Beispielsweise löst die Änderung der ID oder des Seitenattributs in /reports/:id/list?page=23

• always: immer das

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

Komponentenüberwachung 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);
  }
}

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Aktualisieren der aktuellen Seite in Angular (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!