With this code
ngOnInit() { this.router.events.subscribe((val) => { if (this.router.url.indexOf('page') > -1) { let id = this.activedRoute.snapshot.params['Id'] this.busy = this.httpCall.get('/pub/page/GetPageById/' + id) .subscribe(data => { this.pages = <Page[]>data }) console.log(id) } }) } when I navigate to it logs 13 as expected.
But when I navigate to the page which id is 27 it logs: 13 13 27.
When I navigate back to 13 log has: 27 27 13.
Why is it?
5 Answers
You have to unsubscribe when you destroy your component.
First you have to
import { OnDestroy } from '@angular/core;' Then you have to
export class myClass implements OnInit, OnDestroy { myObserver = null; // Rest of your code } In your ngOnInit, you have to
ngOnInit() { this.myObserver = this.router.events.subscribe(...); } Then, create a function
ngOnDestroy() { this.myObserver.unsubscribe(); } From your logs you can see that your subscription is called three times on each route change. So that means events observable emits many signals but you interested in only one.
ngOnInit() { this.getData(); this.router.events.filter(event => event instanceof NavigationEnd).subscribe(event => this.getData()); } getData(){ if (this.router.url.indexOf('page') > -1) { let Id = this.activedRoute.snapshot.params['Id']; this.busy = this.httpCall.get('/pub/page/GetPageById/' + Id) .subscribe( data => { this.pages = <Page[]>data; }); console.log(Id); } } This happens when you write "this.router.events" on ngOnInit or Constructor, For fixing this issue you should write it on other function like that:
onRouteChange () { this.router.events.subscribe((event) => { if (event instanceof NavigationStart) { if (this.router.url.indexOf('page') > -1) { let Id = this.activedRoute.snapshot.params['Id']; this.busy = this.httpCall.get('/pub/page/GetPageById/' + Id) .subscribe( data => { this.pages = <Page[]>data; }); console.log(Id); } } }) } but there is another issue in this which you should consider when you use "this.router.events.subscribe", everything you wrote down in this function happens when you navigate in pages so it better to use this line to prevent run it on every path changes:
import {Router, NavigationStart} from '@angular/router'; onRouteChange () { this.router.events.subscribe((event) => { if (event instanceof NavigationStart) { // this line if(event.url == 'your_page_path') if (this.router.url.indexOf('page') > -1) { let Id = this.activedRoute.snapshot.params['Id']; this.busy = this.httpCall.get('/pub/page/GetPageById/' + Id) .subscribe( data => { this.pages = <Page[]>data; }); console.log(Id); } } }) } Step 1:
_routerSub = Subscription.EMPTY;
Step 2:
ngOnInit(){ this._routerSub = this.router.events .pipe(filter((event: RouterEvent) => event instanceof NavigationEnd)) .subscribe(() => { this.getPosts(this.activatedRoute.snapshot.params.cattmpd); }); } ngOnDestroy(): { this._routerSub.unsubscribe() } I have faced the same problem . I could able to resolve by maintaining a flag
ngOnInit() { this.router.events.filter(event => event instanceof NavigationEnd).subscribe(() => { let render = false; if(this.router.url.indexOf('page') > -1 && !render){ //here goes logic render = true; } } }** 
