Produktbaum Seite bleibt bestehen, auch wenn auf eine andere Seite wie /risikoobjekte gewechselt wird

src/app/app.config.ts

@@ -1,14 +1,16 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core';
-import { provideRouter } from '@angular/router';
+import {provideRouter, RouteReuseStrategy} from '@angular/router';
 
 import { routes } from './app.routes';
 import {provideHttpClient} from '@angular/common/http';
+import {CustomRouteReuseStrategy} from './route-reuse.strategy';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideRouter(routes),
-    provideHttpClient()
+    provideHttpClient(),
+    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
   ]
 };

src/app/produktbaum/produktbaum.html

@@ -54,9 +54,9 @@
                 <strong> {{meldung.errorMsg}} </strong>
               </div>
 
-              <div *ngIf="risikoobjekte.length > 0" class="risikoobjekt-container">
+              <div *ngIf="risikoobjektService.risikoobjekte().length > 0" class="risikoobjekt-container">
                 <strong>Mit dem Baustein assoziiertes Risikoobjekt</strong>
-                <div *ngFor="let ro of risikoobjekte" class="risikoobjekt-item-container">
+                <div *ngFor="let ro of risikoobjektService.risikoobjekte()" class="risikoobjekt-item-container">
                   <label [for]="'check-' + '{{ro.id}}'">
                     {{ro.handelsbezeichnung}} ({{ro.baujahr}})
                   </label>

src/app/produktbaum/produktbaum.ts

@@ -85,8 +85,8 @@ interface Plausi {
 })
 @Injectable({providedIn: 'root'})
 export class Produktbaum {
-  private risikoobjektService = inject(RisikoobjektService);
-  risikoobjekte = this.risikoobjektService.risikoobjekte();
+  protected risikoobjektService = inject(RisikoobjektService);
+  risikoobjekte = this.risikoobjektService.risikoobjekte;
 
   protected readonly title = signal('OMDSAngularWebClient');
 
@@ -361,7 +361,7 @@ export class Produktbaum {
           for (const v of values) {
             const value = this.extractValue(v);
 
-            const ro = this.risikoobjekte.find(
+            const ro = this.risikoobjektService.risikoobjekte().find(
               r => r.id === value.substring(24)
             );
 
@@ -668,7 +668,7 @@ export class Produktbaum {
             const fahrzeug = this.buildFahrzeug(p);
 
             let fahrzeugAlt =
-              this.risikoobjekte.find(r =>
+              this.risikoobjektService.risikoobjekte().find(r =>
                 r.handelsbezeichnung === fahrzeug.handelsbezeichnung
                 && new Date(r.erstzulassung).getTime() === fahrzeug.erstzulassung.getTime())
 
@@ -678,7 +678,7 @@ export class Produktbaum {
               fahrzeugAlt.baujahr = fahrzeug.baujahr;
             } else {
               console.log("neues fahrzeug")
-              this.risikoobjekte.push(fahrzeug);
+              this.risikoobjektService.addRisikoobjekt(fahrzeug);
             }
           }
         })

src/app/route-reuse.strategy.ts

@@ -0,0 +1,31 @@
+import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
+
+export class CustomRouteReuseStrategy implements RouteReuseStrategy {
+  private handlers: { [key: string]: DetachedRouteHandle } = {};
+
+  // Soll die Route gespeichert werden?
+  shouldDetach(route: ActivatedRouteSnapshot): boolean {
+    // Hier kannst du filtern, welche Route gespeichert werden soll (z.B. 'produktbaum')
+    return route.routeConfig?.path === 'produktbaum';
+  }
+
+  // Speichert die Komponente
+  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+    this.handlers[route.routeConfig?.path!] = handle;
+  }
+
+  // Soll eine gespeicherte Route wiederhergestellt werden?
+  shouldAttach(route: ActivatedRouteSnapshot): boolean {
+    return !!this.handlers[route.routeConfig?.path!];
+  }
+
+  // Holt die gespeicherte Komponente zurück
+  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+    return this.handlers[route.routeConfig?.path!];
+  }
+
+  // Soll die Route beim Navigieren wiederverwendet werden?
+  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    return future.routeConfig === curr.routeConfig;
+  }
+}