CODEWITHSUNDEEP
javascriptangulartypescriptangular8
Aakankshi Gupta
Aakankshi Gupta

Reputation: 375

this.router.events not loading on first time in Angular

Does anyone have any idea on how to get the router events to fire the first time the component is loaded?

I am using Angular 8.

I have a deep link that moves to another component. So when I click on the deep link its redirect to the Home page. This happens whenever the computer starts a new session.

So as per my investigation when the app loads for the first time it (this.router.events) returns nothing.

Can anyone please suggest to me regarding it.

Following is my code:- app.component.ts

 ngAfterViewInit() {
    this.getActivatedRoute();
}

getActivatedRoute() {
    debugger
    const routerSub$ = this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
        this.routes = event.url.toLowerCase().split('/');
        this.currentRoute = this.routes[1];
        if (this.currentRoute !== this.previousRoute) {
          this.setBodyClassBasedOnRouter(this.routes);
          this.previousRoute = this.currentRoute;
        }
      }
    });
  }

Upvotes: 17

Views: 11990

Answers (4)

A H
A H

Reputation: 21

You don't need router.event. you can just use router.url for first loading.

otherwise you can use ActivatedRoute state snapshot url for first time and router event for next routings:

constructor(
  private route: ActivatedRoute,
  private router: Router,
){
  let activeRoute = this.route['_routerState']['snapshot'].url;
      
  this.routes = activeRoute.toLowerCase().split('/');
  this.currentRoute = this.routes[1];
  if (this.currentRoute !== this.previousRoute) {
    this.setBodyClassBasedOnRouter(this.routes);
    this.previousRoute = this.currentRoute;
  }

  this.router.events.subscribe({
    next: (rEvent: any) => {
      if(rEvent instanceof NavigationEnd) {
        this.routes = this.router.url.toLowerCase().split('/');
        this.currentRoute = this.routes[1];
        if (this.currentRoute !== this.previousRoute) {
          this.setBodyClassBasedOnRouter(this.routes);
          this.previousRoute = this.currentRoute;
        }
      }
    }
  )}      
}

Upvotes: 0

Elazar Zadiki
Elazar Zadiki

Reputation: 1137

The NavigationEnd event has already been raised when the component registers for it. best solution would be to use the rxjs startWith operator, and let the component load the initial state from the injected Route, like this:

const routerSub$ = this.router.events.pipe(
  filter((e) => e instanceof NavigationEnd),
  startWith(this.router)).
  subscribe((event) => {
        this.routes = event.url.toLowerCase().split('/');
        this.currentRoute = this.routes[1];
        if (this.currentRoute !== this.previousRoute) {
          this.setBodyClassBasedOnRouter(this.routes);
          this.previousRoute = this.currentRoute;
        }
    });

Pay attention to the fact that HTML elements are still not rendered when the constructor is running (if used inside the constructor).

Upvotes: 29

nativelectronic
nativelectronic

Reputation: 862

use it in the constructor

import { NavigationEnd, Router } from '@angular/router'; 
class ...   
constructor(private router:Router) {
    
        this.router.events
        .pipe(
          filter(event => event instanceof NavigationEnd),
          map((event: NavigationEnd) => event.url))
        .subscribe(url => {
    
          const lastUrlSegment = url.split('?')[0].split('/').pop()
          console.log(lastUrlSegment)
          console.log(url)
        });
    
    }

Upvotes: 4

Muminniyoz Shonazarov
Muminniyoz Shonazarov

Reputation: 1

First load working with ActivatedRoute

...
constructor(public activatedroute: ActivatedRoute,) {}
... 
this.activatedroute.url.subscribe(data=>{
            ....
     })

Upvotes: 0

Related Questions