–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}