–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 { Component, OnInit, OnDestory } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';
export class UserComponent implements OnInit {
user: {id: number, name: string};
paramsSubscription: Subscription;
constructor(private route: ActivatedRoute){}
ngOnInit(){
this.user = {
id: this.route.snapshot.params['id'],
name: this.route.snapshot.params['name']
}
this.paramsSubscription = this.route.params
.subscribe(
(params: Params) => {
this.user.id = params['id'],
this.user.name = params['name']
}
)
}
ngOnDestory(){
this.paramsSubscription.unsubscribe();
}
}
–TS File (Routing)
{path: 'users/:id/:name', component: UserComponent}