Angular 路由器订阅多次呼叫

使用此代码

ngOnInit（）{
this.router.events.subscribe（（val）=>{
if（this.router.url.indexOf（'page'）>-1）{
让id=this.activedroote.snapshot.params['id']
this.busy=this.httpCall.get（'/pub/page/GetPageById/'+id）
.订阅（数据=>{
this.pages=数据
})
控制台日志（id）
}
})
}

当我导航到

domain.com/#/en/page/13

时，它会按预期记录

13

但是当我导航到id为

27

的页面时，它会记录：

13 27

当我导航回

13

时，日志有：

27 13

---

为什么会这样？

销毁组件时必须取消订阅

首先你必须

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

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

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

那你必须

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

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

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

在你的ngOnInit中，你必须

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

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

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

然后，创建一个函数

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

---

从您的日志中可以看到，每次路由更改都会调用您的订阅三次。这意味着可观测的事件会发出很多信号，但你只对其中一个感兴趣

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

ngOnInit（）{
这是getData（）；
this.router.events.filter（event=>event instanceof NavigationEnd）.subscribe（event=>this.getData（））；
}
getData（）{
if（this.router.url.indexOf（'page'）>-1）{
设Id=this.activedroote.snapshot.params['Id']；
this.busy=this.httpCall.get（'/pub/page/GetPageById/'+Id）
.订阅(
数据=>{
this.pages=数据；
});
console.log（Id）；
}
}

在ngOnInit或构造函数上编写“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);    
        }
      }
    })
  }

onRouteChange（）{
this.router.events.subscribe（（事件）=>{
if（导航启动的事件实例）{
if（this.router.url.indexOf（'page'）>-1）{
设Id=this.activedroote.snapshot.params['Id']；
this.busy=this.httpCall.get（'/pub/page/GetPageById/'+Id）
.订阅(
数据=>{
this.pages=数据；
});
console.log（Id）；
}
}
})
}

但是，在使用“Tras.Real.Evest.Sube”时，您应该考虑的另一个问题是，当您在页面中导航时，您在该函数中写下的所有内容都会更好地使用该行以防止在每个路径上运行它：

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

从'@angular/Router'导入{Router，NavigationStart}；
onRouteChange（）{
this.router.events.subscribe（（事件）=>{
if（导航启动的事件实例）{
//这条线
如果（event.url==“您的页面路径”）
if（this.router.url.indexOf（'page'）>-1）{
设Id=this.activedroote.snapshot.params['Id']；
this.busy=this.httpCall.get（'/pub/page/GetPageById/'+Id）
.订阅(
数据=>{
this.pages=数据；
});
console.log（Id）；
}
}
})
}

步骤1：

\u 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()

}

我也面临同样的问题。我可以通过维护一面旗帜来解决问题

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

谢谢你的回答，但结果是一样的。。P.S.Ngondestory needs（），谢谢你，没有看到，如果它仍然给出相同的结果，你应该尝试移动取消订阅，也许在你的订阅中，这样一旦完成，观察者就可以直接取消订阅！我的问题来了。我需要订阅http调用，我在ngOnInit中有它。如果我想从第/13页重定向到第/27页，它不会执行该调用..即使使用navigationEnd criterial进行筛选也帮不了我，不过这对我很有效，谢谢@Trichetriche我已经尝试过了，但现在我得到了空页。如果

语句中没有的话，那么再问一个问题。它适用于该组件，但当我从这里导航到其他组件时，我得到一个错误：

无法读取null的属性“unsubscribe”

您是否仍然有下面答案中的代码？：

ngondstroy（）{this.myObserver.unsubscribe（）；}

如果是，请删除它，或者将订阅保存在适当的变量中。