bộ định tuyến đăng ký cuộc gọi nhiều lần

Từ nhật ký của bạn, bạn có thể thấy rằng đăng ký của bạn được gọi ba lần trên mỗi lần thay đổi tuyến đường. Vì vậy, điều đó có nghĩa là các sự kiện có thể quan sát phát ra nhiều tín hiệu nhưng bạn chỉ quan tâm đến một.

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

Bạn phải hủy đăng ký khi phá hủy thành phần của mình.

Đầu tiên bạn phải

import { OnDestroy } from '@angular/core;'

Sau đó bạn phải

export class myClass implements OnInit, OnDestroy {
    myObserver = null;
    // Rest of your code
}

Trong ngOnInit của bạn, bạn phải

ngOnInit() {
    this.myObserver = this.router.events.subscribe(...);
}

Sau đó, tạo một hàm

ngOnDestroy() {
    this.myObserver.unsubscribe();
}

Điều này xảy ra khi bạn viết "this.router.events" trên ngOnInit hoặc Constructor, Để khắc phục sự cố này, bạn nên viết nó trên một hàm khác như sau:

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

nhưng có một vấn đề khác trong đó bạn nên xem xét khi sử dụng "this.router.events.subscribe", mọi thứ bạn đã viết ra trong hàm này sẽ xảy ra khi bạn điều hướng trong các trang vì vậy tốt hơn nên sử dụng dòng này để ngăn chạy nó trên mọi thay đổi đường dẫn:

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

Bước 1:

_routerSub = Subscription.EMPTY;

Bước 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()

}

Tôi đã phải đối mặt với cùng một vấn đề. Tôi có thể giải quyết bằng cách duy trì một lá cờ

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