Wie aktualisiere ich die aktuelle Seite in Angular? Methodeneinführung

In diesem Artikel erfahren Sie, wie Sie mit Angular die aktuelle Seite aktualisieren können. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Mehrere Möglichkeiten für Angular, die aktuelle Seite zu aktualisieren

---

Standardmäßig ignoriert der Angular-Router den Empfang einer Anfrage zum Navigieren zur aktuellen URL.

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

Die Seite wird nicht aktualisiert, wenn Sie wiederholt auf denselben Link klicken.

Das Attribut onSameUrlNavigation wird von Angular 5.1 bereitgestellt, um das Neuladen von Routen zu unterstützen.

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

onSameUrlNavigation hat zwei optionale Werte: „reload“ und „ignore“, der Standardwert ist „ignore“. Aber wenn Sie onSameUrlNavigation einfach auf „reload“ ändern, wird nur das RouterEvent-Ereignis ausgelöst und die Seite wird nicht neu geladen. Andere Methoden müssen verwendet werden. Bevor wir fortfahren, aktivieren wir Router Trace und überprüfen das Routing-Ereignisprotokoll über die Browserkonsole:

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

Sie können sehen, dass ein erneutes Klicken auf denselben Link das Protokoll nicht ausgibt, wenn onSameUrlNavigation als „reload“ konfiguriert wurde. Es wird ein Protokoll ausgegeben, das folgende Ereignisse enthält: NavigationStart, RoutesRecognized, GuardsCheckStart, GuardsCheckEnd, ActivationEnd, NavigationEnd usw.

Empfohlene verwandte Tutorials: „Angular Tutorial“

Im Folgenden werden verschiedene Methoden zum Aktualisieren der aktuellen Seite vorgestellt:

NavigationEnd

1. Konfigurieren Sie onSameUrlNavigation als „reload“

2. Achten Sie auf das NavigationEnd event

Abonnieren Sie das Router-Ereignis, laden Sie die Daten in NavigationEnd neu und melden Sie sich ab, wenn die Komponente zerstört wird:

export class HeroesComponent implements OnDestroy {
  heroes: Hero[];
  navigationSubscription;

  constructor(private heroService: HeroService, private router: Router) {
    this.navigationSubscription = this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.init();
      }
    });
  }

  init() {
    this.getHeroes();
  }

  ngOnDestroy() {
    if (this.navigationSubscription) {
      this.navigationSubscription.unsubscribe();
    }
  }
  ...
}

Mit dieser Methode kann die Seite so konfiguriert werden, dass sie bei Bedarf aktualisiert wird, der Code ist jedoch umständlich.

RouteReuseStrategy

1. Konfigurieren Sie onSameUrlNavigation als „reload“

2. Passen Sie RouteReuseStrategy an, ohne Route wiederzuverwenden. Es gibt zwei Möglichkeiten, es zu implementieren:

Ändern Sie die Strategie im Code:

constructor(private heroService: HeroService, private router: Router) {
  this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };
}

Angular-Anwendungsrouter ist ein Singleton-Objekt. Wenn Sie diese Methode verwenden, wirkt sich eine Änderung der Richtlinie in einer Komponente auf andere Komponenten aus. Der Router wird jedoch nach dem Aktualisieren der Seite über den Browser neu initialisiert, was leicht zu Verwirrung führen kann und nicht empfohlen wird.

Customized RouteReuseStrategy:

import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }

}

Benutzerdefinierte RouteReuseStrategy verwenden:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
  providers: [
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
  ]
})

Diese Methode kann eine komplexere Routenwiederverwendungsstrategie implementieren.

Resolve

Verwenden Sie Resolve, um Daten im Voraus vom Server abzurufen, sodass die Daten bereit sind, bevor die Route aktiviert wird. 1. Implementieren Sie ResolverService

Übertragen Sie den Initialisierungscode in der Komponente:

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';

import {HeroService} from '../hero.service';
import {Hero} from '../hero';

@Injectable({
  providedIn: 'root',
})
export class HeroesResolverService implements Resolve<Hero[]> {
  constructor(private heroService: HeroService) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero[]> | Observable<never> {
    return this.heroService.getHeroes();
  }
}

Konfigurieren Sie den Resolver für das Routing:

path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}

3. Konfiguration onSameUrlNavigation ist 'reload'

4, runGuardsAndResolvers als 'always' konfigurieren

runGuardsAndResolvers optionale Werte: 'paramsChange', 'paramsOrQueryParamsChange', 'always'

constructor(private heroService: HeroService, private route: ActivatedRoute) {
}

ngOnInit() {  this.route.data.subscribe((data: { heroes: Hero[] }) => {    this.heroes = data.heroes;
  });
}

timestamp

give Router fügt Zeitparameter hinzu. :

{path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}, runGuardsAndResolvers: 'always'}

rrree Dann abonnieren Sie queryParamMap in der Komponente:

<a (click)="gotoHeroes()">Heroes</a>

Für mehr Programmierkenntnisse besuchen Sie bitte: Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich die aktuelle Seite in Angular? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!