CODEWITHSUNDEEP
javascriptangular
Web Develop Wolf
Web Develop Wolf

Reputation: 6306

Angular 2 ActivatedRoute returning empty

I'm attempting to get a string that will tell me the url used to access the page - so for example if someone navigated to localhost/messages/inbox I'd want the 'messages' part of the route as a string.

So far the code I've used to do this is:

    import { Router, RouterModule, ActivatedRoute } from '@angular/router';

    @Component({
      selector: 'app-sub-nav',
      templateUrl: './sub-nav.component.html',
      styleUrls: ['./sub-nav.component.css']
    })
    export class SubNavComponent implements OnInit {

      constructor(private router: ActivatedRoute) { }

      ngOnInit() {

         console.log(this.router.snapshot);

      }
   }

When I look in the console, it returns the entire ActivatedRoute object, but most of the properties are empty. Including snapshot, child, parent etc. Is there something I'm missing?

Just a quick note - I need this string to update each time the route changes. I did have this working previously with the Router object, but this appears to remain static each time the route changes.

Upvotes: 4

Views: 2300

Answers (3)

Yerkon
Yerkon

Reputation: 4788

Just a quick note - I need this string to update each time the route changes. I did have this working previously with the Router object, but this appears to remain static each time the route changes.

Subscribe to Router NavigationEnd event .

NavigationEnd - Represents an event triggered when a navigation ends successfully

 ngOnInit() {
    this.router.events.subscribe(events => {
      if (events instanceof NavigationEnd) {
        console.log('NavigationEnd evnet', events);
      }
    })
  }

So, each time when successfully navigating to routes this event will fired with event object:

{
 urlAfterRedirects: string
  toString(): string
  // inherited from router/RouterEvent
  id: number
  url: string
}

StackBlitz EXAMPLE

Upvotes: 1

harold_mean2
harold_mean2

Reputation: 238

You can use navigation in many ways. So instead of providing you a simple answer, I am answering this way to help you. My app is a shopping cart but this is how I search for a product that is top selling/new repurbished, and just normal search. In your case, location: /messages/inbox and searchStr = messageStr. This is how you navigate.

goToMessage(searchStr: string){
if(this.productQuery.isTopSelling) 
  this._router.navigate(['/' + location + '/' + searchStr], 
    {queryParams: {isTopSelling: true}});
else if(this.productQuery.newPreRepurbished != 'none')
  this._router.navigate(['/' + location + '/' + searchStr], 
    {queryParams: {npr: this.productQuery.newPreRepurbished}});
else this._router.navigate(['/' + location + '/' + searchStr]);
}

Here is the way I retrieve the information from the route.

   this.route.queryParams.subscribe(
    params=>{
      let messageStr =  params['id']; //how you retrieve the message
      let isTopSelling = params['isTopSelling'] || false; //search by boolean
      let newPreRepurbished = params['npr'] || 'none';
      let brand = params['brnd'] || 'none'; //search by string
    });

You can send more information to the route using queryParams. I hope I am not confusing you. Hope this helps. Happy coding.

Because you get a static answer(not changing), you may need to implement OnChanges.

ngOnChanges(){
  this.ngOnInit();
}

Upvotes: 0

Nadhir Falta
Nadhir Falta

Reputation: 5257

Try:

this.router.data
      .subscribe(
         (data) => {
             console.log('data', data);
       });

Upvotes: 0

Related Questions