Home > Enterprise >  Angular router - way to identify, does the router perform initial navigation or it comes from app
Angular router - way to identify, does the router perform initial navigation or it comes from app

Time:11-17

Hello Stack community.

As in question title, I'm wondering is there a way to identify, does a view in Angular is rendered as a subsequent Angular Router navigation request (i.e. internal navigation request)

or

does a view is rendered due to user typing exact URL in his browser bar and view comes up as first view of the app?

Example would be user performing some sort of ordering on page my.page.com/order

and then clicking on this page on button that will invoke router.navigate(['next'])

vs

entering directly my.page.com/order/next to his URL.

Do we have some trusted and production-grade ready solution for this?

CodePudding user response:

You can listen to router events and then filter out all the navigation end events, then pairwise will emit the last value and the current value, then you store it in variables of a component, or on a service and then solve your issue!

This is from a previous answer, but the gist is on load, you will be getting previousPath as null, while when navigation happens, previous path will contain a value!

ngOnInit() {
    this.router.events
      .pipe(
        filter((x) => x instanceof NavigationEnd), // filter out only the navigation end event
        startWith(null), // set an initial value
        map((x) => x && x.url), // get only the necessary value
        pairwise() // emit both the previous and current value
      )
      .subscribe((event) => {
        console.log('navigation succeeded', event[0], event[1]);
        this.previousPath = event[0];
        this.currentPath = event[1];
      });
  }

forked stackblitz

  • Related