router subscribe calls multiple time

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);
        }
    }

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();
}

Tags:

Angular