typescript - Angular custom RouteReuseStrategy not working - Stack Overflow

admin管理员组

文章数量:1193986

Below route reuse is not working. Route changes and reloads CustomRouteReuseStrategy. Will it work or any alternate way?

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
import { NavigationStart, Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class CustomRouteReuseStrategy implements RouteReuseStrategy {  
private storedRoutes = new Map<string, DetachedRouteHandle>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true; // Allow detaching
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
    if (handle) {
      this.storedRoutes.set(route.routeConfig?.path ?? '', handle);
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return this.storedRoutes.has(route.routeConfig?.path ?? '');
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.storedRoutes.get(route.routeConfig?.path ?? '') || null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

Below route reuse is not working. Route changes and reloads CustomRouteReuseStrategy. Will it work or any alternate way?

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from '@angular/router';
import { NavigationStart, Router } from '@angular/router';

@Injectable({
  providedIn: 'root',
})
export class CustomRouteReuseStrategy implements RouteReuseStrategy {  
private storedRoutes = new Map<string, DetachedRouteHandle>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true; // Allow detaching
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
    if (handle) {
      this.storedRoutes.set(route.routeConfig?.path ?? '', handle);
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return this.storedRoutes.has(route.routeConfig?.path ?? '');
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.storedRoutes.get(route.routeConfig?.path ?? '') || null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

• angular
• typescript

Share Improve this question Follow edited Jan 29 at 15:36 ManiTeja asked Jan 23 at 14:20 ManiTejaManiTeja 84711 gold badge99 silver badges1313 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

import { Injectable } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class NavigationTrackerService {
  private originalUrls = new Map<string, string>(); // To store original URLs
  public url$ = new BehaviorSubject<string>('');

  constructor(private router: Router) {
    // Subscribe to NavigationStart to track original URLs
    this.router.events
      .pipe(filter((event) => event instanceof NavigationStart))
      .subscribe((event: NavigationStart) => {
        const url = event.url;
        this.url$.next(url); // Broadcast the URL
        const key = this.getKeyFromUrl(url);
        if (key && !this.originalUrls.has(key)) {
          this.originalUrls.set(key, url); // Cache the original URL
        }
      });
  }

  getOriginalUrl(key: string): string | undefined {
    return this.originalUrls.get(key);
  }

  private getKeyFromUrl(url: string): string {
    return url; // You can customize this logic as needed
  }
}

import {
  RouteReuseStrategy,
  ActivatedRouteSnapshot,
  DetachedRouteHandle,
} from '@angular/router';
import { Injectable } from '@angular/core';
import { NavigationTrackerService } from './navigation-tracker.service';

@Injectable({
  providedIn: 'root',
})
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedRoutes: { [key: string]: DetachedRouteHandle } = {};

  constructor(private navigationTracker: NavigationTrackerService) {}

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

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
    const key = this.getRouteKey(route);
    if (key) {
      this.storedRoutes[key] = handle;
    }
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const key = this.getRouteKey(route);
    return !!this.storedRoutes[key];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    const key = this.getRouteKey(route);
    return key ? this.storedRoutes[key] : null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    const futureKey = this.getRouteKey(future);
    const currKey = this.getRouteKey(curr);

    // Use NavigationTrackerService to compare original URLs if needed
    const futureUrl = this.navigationTracker.getOriginalUrl(futureKey);
    const currUrl = this.navigationTracker.getOriginalUrl(currKey);

    return futureUrl === currUrl && future.routeConfig === curr.routeConfig;
  }

  private getRouteKey(route: ActivatedRouteSnapshot): string | null {
    const path = route.routeConfig?.path;
    const params = JSON.stringify(route.params);
    return path ? `${path}_${params}` : null;
  }
}

本文标签： typescriptAngular custom RouteReuseStrategy not workingStack Overflow