CODEWITHSUNDEEP
angular
doorman
doorman

Reputation: 16969

The route params is empty

I have the following user template file which contains tab control 

<nav md-tab-nav-bar>              
          <a class="tab-label" md-tab-link [routerLink]="'following'" routerLinkActive #following="routerLinkActive" [active]="following.isActive">
            Following
          </a>

and the following app.route config

export const ROUTES: Routes = [
{
    path: 'user/:id', loadChildren: './user/user.module#UserModule'
},

and the following user.route config 

const ROUTES: Routes = [
{
    path: '', component: UserComponent,
    children: [

        { path: 'following', loadChildren: './following/following.module#FollowingModule' }            
    ]
}

];

The problem is that I want to get the id in the "following" component like this:

  this.route.params.subscribe(params => {
            console.error(params);
        });

but params is always empty.

Do I need to specify the id param in the user.route somehow?

I also tried calling the parent like this but the params is still empy...

this.subRoute = this.route.parent.params.subscribe(params => {

            console.log(params);
});

Upvotes: 1

Views: 9233

Answers (2)

developer033
developer033

Reputation: 24894

Do I need to specify the id param in the user.route somehow?

Yes, you need to specify the parameter in path:

const routes: Routes = [
{
  path: '', component: UserComponent,
  children: [    
    { 
      loadChildren: './following/following.module#FollowingModule',
      path: ':parent_id/following' // <- Here
    }
  ]
}

So, somewhere in "following" component:

const parentId = this.activatedRoute.snapshot.paramMap.get('parent_id');

PS: I'm assuming that you have a config route like this (in "following" component):

const routes: Routes = [
  {
    component: FollowingComponent, path: ''
    ...
  }
]

Upvotes: 2

Hootan Alavizadeh
Hootan Alavizadeh

Reputation: 411

use this to route:

this.router.navigate(['/productlist'], { queryParams: { filter: JSON.stringify(this.product) } });

and in another component:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
.
.
.
export class ProductListComponent implements OnInit {

    constructor(private route: ActivatedRoute, private router: Router) {
    }

    public ngOnInit() {
         this.route
          .queryParams
          .subscribe(params => {
                let filterParam = JSON.parse(params['filter']);
                console.log(filterParam);
           });
    }
}

Upvotes: 1

Related Questions