Angular 2/4 How to get route parameters in app com

Question

As I am new to angular 2/4 I am having trouble setting up a new application as per my need.

I am trying to build an application which will be called for from some another application. Calling application will send some parameter like token, username, application id and etc.

Now, as in Angular 2/4, app.component is our landing component and every first request will go through it. So, I want to get those parameter here in app component and load some user detail, make a local session and the move to other stuff.

problem is when I am trying to access these parameter I am getting anything.

Here is the URL which will start my angular application: http://localhost:86/dashboard?username=admin&token=xyz&appId=8

Here is my routing file code:

const routes: Routes = [
  {
    path: 'dashboard/:username, token', component: AppComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

Here is my App Component Code:

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from 'app/services/authentication/authentication.service';
import { User } from 'app/models/user/user';
import { AppConfig } from 'app/helpers/AppConfig';
import { ActivatedRoute, Router } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  _user: User = new User();
  obj: any;
  error: any;

  loginName: string;
  private id: any;

  constructor(
    private authenticationService: AuthenticationService,
    private config: AppConfig,
    private route: ActivatedRoute,
    private router: Router

  ) { }

  ngOnInit() {    
    this.loadCurrentUserDetail();
    this.getParamValues()

  }

  getParamValues() {
    this.id = this.route.queryParams.subscribe(params => {      
       this.loginName = params['username']; 
    });
  }

Here params is empty don't know why?

Thanks in advance!

As in image params object has nothing.

Answer 1

This is your way to go in angular 5+:

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

constructor(private route: ActivatedRoute){}
ngOnInit() {
    console.log(this.route.snapshot.params['username']);
}

Update to a reason why people are downvoting: The above snapshot method. Snapshot method just gives you result once you initiate the component. So this will keep on working if you change the route or destroy the component and initiate again only.

A solution for the downvoters and/or anyone who want to update the param each time the route change will be:

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

constructor(private route: ActivatedRoute){}
ngOnInit() {
    console.log(this.route.snapshot.params['username']); // works first time only
/** For later use, updates everytime you change route*/
    this.route.params.subscribe((parmas) => {console.log(params['username'])});
}

Answer 2

This post solved problem. here

I needed to create a separate component Root and in that i kept my Router-Outlet and added this component as my bootstrap module and it worked!! I do not have reputation more than 50 if i had than i would thanked him on the same post. Thanks man @Fabio Antunes