Question

我有这段代码

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

}

当我导航到domain.com/#/en/page/13时，它会记录13。然后，当我导航到id为27的页面时，它说： 13 13 27。当我导航回13：27 27 13时。怎么了？

Answer 1

销毁组件时必须取消订阅。

首先你需要

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

然后你必须

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

在你的ngOnInit中，你必须

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

然后，创建一个函数

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

Answer 2

您可以在日志中看到每次路径更改时都会调用您的订阅三次。因此，这意味着可观察到的事件会发出许多信号，但您只对一个感兴趣。

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

Answer 3

当您在ngOnInit或Constructor上编写“ this.router.events”时，会发生这种情况。要解决此问题，您应该在其他类似的函数上编写它：

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

但是其中还有另一个问题，当您使用“ this.router.events.subscribe”时，您应该考虑该问题，您在此功能中写下的所有内容都会在您浏览页面时发生，因此最好使用此行来防止运行它在每条路径上都会改变：

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

Answer 4

第1步：

_routerSub = Subscription.EMPTY;

第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()

}

Answer 5

我遇到了同样的问题。我可以通过维护一个标志来解决

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

路由器订阅多次调用

5 个答案: