Destroy 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 { 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}

Leave a Reply

Your email address will not be published. Required fields are marked *