Angular 如何在路由参数更改时取消http调用

我有一个使用url参数的组件

在ActivateRoute.params更改事件中，Http调用被发送到服务器，以根据url中的ID参数获取一些详细信息

问题出现在以下情况：

一旦url被更改为具有新参数，就会发送一个新的调用-这没关系

然后-url再次更改，因此现在发送了一个新的呼叫

但是-有时旧的呼叫响应在新的呼叫响应之后，因此数据不正确，并且与最新的URL不匹配

我真正需要的是一种在url更改后取消呼叫的方法

我尝试了一个基于我找到的答案的解决方案，下面的更改与我的案例相匹配，但它似乎不起作用

应用程序路由.module.ts:

{ path: 'person-details/:id', component: PersonDetailsComponent }

protected ngUnsubscribe: Subject<void> = new Subject<void>();

ngOnInit(){
   this.activatedRouter.params
      .subscribe( (params) => {
           //here is what I tried to cancel prev calls
           this.ngUnsubscribe.next();
           this.ngUnsubscribe.complete();
           //the call
           this.personService.getPersonDetails(params['id'])
                //add call to ngUnsubscribe
               .pipe( takeUntil(this.ngUnsubscribe))
               .subscribe( (person) => {
                      //the old call response gets here after the new one so now
                      //this.person is not the latest one and not matching the id in the current url 
                      this.person = person;
                 });
      }

人员详细信息。组件。ts:

{ path: 'person-details/:id', component: PersonDetailsComponent }

protected ngUnsubscribe: Subject<void> = new Subject<void>();

ngOnInit(){
   this.activatedRouter.params
      .subscribe( (params) => {
           //here is what I tried to cancel prev calls
           this.ngUnsubscribe.next();
           this.ngUnsubscribe.complete();
           //the call
           this.personService.getPersonDetails(params['id'])
                //add call to ngUnsubscribe
               .pipe( takeUntil(this.ngUnsubscribe))
               .subscribe( (person) => {
                      //the old call response gets here after the new one so now
                      //this.person is not the latest one and not matching the id in the current url 
                      this.person = person;
                 });
      }

protected ngUnsubscribe:Subject=new Subject（）；
恩戈尼尼特（）{
this.activatedRouter.params
.订阅（（参数）=>{
//以下是我试图取消上一次通话的内容
this.ngUnsubscribe.next（）；
this.ngUnsubscribe.complete（）；
//电话
this.personService.getPersonDetails（参数['id']）
//向ngUnsubscribe添加呼叫
.pipe（takeUntil（this.ngUnsubscribe））
.认购（（人）=>{
//旧的呼叫响应在新的呼叫响应之后到达，所以现在
//this.person不是最新的，并且与当前url中的id不匹配
这个人=人；
});
}

注意：如果仅更改了url中的参数，则不会调用Ngondestory，因此与我的情况不匹配

---

正确的解决方案是什么？

正确的解决方案是使用RxJS运算符：

this.activatedRoute.params.pipe(
  switchMap(params => this.personService.getPersonDetails(params['id']))
).subscribe(person => this.person = person);

---

您好，谢谢您的快速回答！我现在就试试这个，但想问一下-如果我在ActivatedRoute.params更改事件中有一些其他代码和几个调用，有没有其他方法可以使用这个？例如，this.personService.getPersonDetails（params['id']）和this.personService.getPersonCars（params['id']）-如何将其用于您的解决方案？假设getPersonDetails（）和getPersonCars（）是两个可观察对象，您将使用zip（）或forkJoin（）或CombineTest（）或merge（）从这两个对象中创建一个唯一的可观察对象，并从swicthMap回调返回该唯一的可观察对象。