Wie implementiert man eine benutzerdefinierte RouteReuseStrategy, um bestimmte Routen in Angular zu trennen?

Implementieren von RouteReuseStrategys ShouldDetach für bestimmte Routen in Angular 2

Hintergrund

Mit RouteReuseStrategy können Sie Angular anweisen, eine Komponente beizubehalten, anstatt sie beim Navigieren zu zerstören , um die Leistung zu optimieren und den Zustand der Komponente beizubehalten.

Problemstellung

Sie möchten den Zustand für Routen wie „/documents“, aber nicht für bestimmte Routen wie „/documents/:id“ speichern.

Lösung

Implementieren Sie eine benutzerdefinierte RouteReuseStrategy, indem Sie die integrierte RouteReuseStrategy erweitern und die entsprechenden Methoden überschreiben:

Import vom Angular-Router

<code class="typescript">import { RouteReuseStrategy } from '@angular/router';</code>

Erstellen Sie eine Klasse, die RouteReuseStrategy implementiert

<code class="typescript">export class CustomRouteReuseStrategy implements RouteReuseStrategy {</code>

Überschreiben Sie „shouldDetach“ für selektive Routenspeicherung

<code class="typescript">shouldDetach(route: ActivatedRouteSnapshot): boolean {
  return route.routeConfig?.path === '/documents/id';
}</code>

Stellen Sie die benutzerdefinierte Strategie im NgModule bereit

<code class="typescript">providers: [
  { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy },
]</code>

Erklärung

• shouldDetach: Steuert die Speicherung der Route. Geben Sie „true“ für Routen zurück, die Sie speichern möchten. Speichern Sie in diesem Szenario nur die Route „/documents“.
• shouldAttach: Legt fest, wann eine gespeicherte Route wiederverwendet werden soll. Wenn diese Methode „true“ zurückgibt, verwendet Angular die Komponente wieder, anstatt sie neu zu erstellen. Wir überschreiben diese Methode in unserem Beispiel nicht.

Zusätzliche Hinweise:

• Diese Implementierung speichert eine Instanz jeder qualifizierten Route im gesamten Benutzernetzwerk Sitzung.
• Sie können weitere Anpassungen vornehmen, indem Sie „shouldDetach“ ändern, um zu steuern, welche Routen basierend auf Ihren Anforderungen gespeichert werden sollen.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine benutzerdefinierte RouteReuseStrategy, um bestimmte Routen in Angular zu trennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!