Read route params from directly entered url in app

Question

My question would be regarding angular 4, how to get route params, if for example a user gets on your page with, instead of the default url, like for example http://localhost:3000/ , to something like http://localhost:3000/user/:id , and to be able to pick up the :id from that url (user has directly entered it in the browser, not navigating through the app).

In the example bellow same component is used, mainly because of needing to catch that id and dispatch other actions, if its present, and that would be it.

I have tried playing around with ActivatedRoute but from what I could tell so far, that only works when navigation throughout the app, from within the app, not in this case, which always returns a null value if that url is directly entered in the browser, it gets redirected to the default / route and that would be it.

Any tips or pointers are much appreciated

app.routing-module.ts

 import {hookComponent} from './hook.component'; import {RouterModule, Routes} from '@angular/router'; import {NgModule} from '@angular/core'; export const routes: Routes = [ { path: '', component: HookComponent }, { path: 'user/:id', component: HookComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes, { enableTracing: true })], exports: [RouterModule] }) export class AppRoutingModule {} 

hook.component

 import {Component, EventEmitter, Input, OnInit, ViewChild} from '@angular/core'; import { ActivatedRoute, ParamMap} from '@angular/router'; @Component({ selector: 'hook', templateUrl: 'hook.component.html', styleUrls: ['hook.component.scss'] }) export class HookComponent implements OnDestroy, OnInit { constructor(private route: ActivatedRoute) { } ngOnInit() { this.sub = this.route.params.subscribe(params => { console.log('params are', params); //null? }); } } 

Answer 1

Access current url via Location

public  constructor(location:Location) {
  let url = location.prepareExternalUrl(location.path());
}

and parse out id from this.

Answer 2

Your way is already ok, but in your example params is an array and you can access to :id by calling params['id'] :

this.sub = this.route.params.subscribe(params => {
  console.log('params are', params['id']);
});

Here is an working example on stackblitz.

Answer 3

If all you want to do is log the params.id ; try using the ActivatedRouteSnapshot like this.

  ngOnInit() {
    console.log(this.route.snapshot.params.id);
}

If you want to check if the params.id is present, maybe do something like:

import {Component, EventEmitter, Input, OnInit, ViewChild} from '@angular/core';
import { ActivatedRoute, ParamMap} from '@angular/router';

@Component({
  selector: 'hook',
  templateUrl: 'hook.component.html',
  styleUrls: ['hook.component.scss']
})
export class HookComponent implements OnDestroy, OnInit {

  hasId: boolean = false;
  constructor(private route: ActivatedRoute) {

  }

  ngOnInit() {
    if(this.route.snapshot.params.id !== null)
    {
        // do magic....
    }
  }
}