Router Subscribe Calls Multiple Time

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

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