0

I've implemented a component reuse strategy in Angular, and I'm applying this functionality when navigating internal back(not browser back button) navigation.

However, after navigating back and clicking on a current list item to move to another component, ngOnInit() is not triggering due to the reuse strategy. How can I ensure ngOnInit() is triggered in this case?

CustomRouteReuseStrategyService

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

@Injectable({
  providedIn: 'root'
})
export class CustomRouteReuseStrategyService implements RouteReuseStrategy {
  private handlers: { [key: string]: () => void } = {};
  private backNavigation: boolean;

  setBackNavigation(backNavigation: boolean): void {
    this.backNavigation = backNavigation;
  }

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return this.backNavigation ? false : true;
  }

  store(route: ActivatedRouteSnapshot, handler: () => void): void {
    this.handlers[route.routeConfig.path] = handler;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this.handlers[route.routeConfig.path];
  }

  retrieve(route: ActivatedRouteSnapshot): () => void {
    return this.handlers[route.routeConfig.path];
  }

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

back navigation in header component

goBack(): void {
    console.log("Go back clicked>>>");
    // Set the back navigation flag to true
    this.customRouteReuseStrategyService.setBackNavigation(true);
    // Navigate back
    //this.router.navigate(['../'], { relativeTo: this.route });
     //this.location.back();
    this.navigationService.goBack();
  }
6
  • What's happening within the goBack() Method of the NavigationService? Besides, ngOnInit is called each time the Component is initialized. Looks like You may want to look into using tick() within your goBack Method. Inject ApplicationRef eg: private _appRef = inject(ApplicationRef) and then inside your goBack Method; invoke: this._appRef.tick()... This is only a wild Idea and involves manually triggering re-rendering but it's also likely close though... Commented Aug 28, 2024 at 5:54
  • Whats about this: stackoverflow.com/questions/69498489/… Commented Aug 28, 2024 at 5:56
  • why would you want to trigger ngOnInit() again? The whole point of the ReuseStrategy is to NOT recreate the component. Commented Aug 28, 2024 at 13:51
  • ngOnInit is call when the component init, not when input change. I think in your case you need to call ngOnChanges when the input change (here new item selected from your list) Commented Aug 28, 2024 at 21:29
  • @berse2212 My whole idea is to keep a snapshot of the component for back navigation. If the user clicks on any action buttons in the current component, it should trigger ngOnInit() in another component again. Is there any other solution for this use case? Commented Aug 29, 2024 at 3:23

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.