Fetching Route Parameters Reactively in Angular 4

–HTML File

<p>User with ID {{user.id}} loaded.</p>
<p>User with is {{user.name}} loaded.</p>
<hr>
<a [routerLink]="['/users', 15, 'Sam']">Load Same (15)</a>

–TS File

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

export class UserComponent implements OnInit {
  user: {id: number, name: string};

  constructor(private route: ActivatedRoute){}

  ngOnInit(){
    this.user = {
       id: this.route.snapshot.params['id'],
       name: this.route.snapshot.params['name']
    }
    this.route.params
      .subscribe(
        (params: Params) => {
             this.user.id = params['id'],
             this.user.name = params['name']
        }
      )
    }
}

–TS File (Routing)

{path: 'users/:id/:name', component: UserComponent}