Rxjs 开关映射用法onTabSelect

下面是我的代码，当用户选择tab时，我想取消现有调用并加载用户单击的tab详细信息

我知道我必须使用switchmap（如果不正确或更好的选择，请指导我）

我遵循这个示例，但它不适用于我，因为id具有Valuechanges属性

---

app.component.html

单击事件将发出我在每次按钮单击中选择的按钮

托普芬基
罗兰
卢卡斯
{{user.name}
{{user.location}

应用程序组件.ts

声明要订阅的主题，单击按钮。 debounceTime设置为500ms，在发出所选选项之前将等待500ms

从'@angular/core'导入{Component，OnInit，OnDestroy}；
从“rxjs”导入{Subject，observeable，Subscription}；
从“rxjs/operators”导入{switchMap，debounceTime}；
从“./models/User”导入{User}；
从'@angular/common/http'导入{HttpClient}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
})
导出类AppComponent实现OnInit、OnDestroy{
用户：用户；
tabclickSubject=新主题（）；
认购：认购；
构造函数（私有http:HttpClient）{}
恩戈尼尼特（）{
此.getUser（'topfunky'）.subscribe(
用户=>{
this.user=用户；
}
);
this.subscribeToButtonClick（）；
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
subscribeToButtonClick（）{
this.subscription=this.tabclickSubject.pipe(
去BounceTime（500），
开关映射（选项=>{
如果（选项==1）{
返回这个.getUser（'topfunky'）；
}否则如果（选项===2）{
返回此.getUser（'roland'）；
}否则{
返回此.getUser（'lukas'）；
}
})
).订阅（响应=>{
this.user=响应；
});
}
getUser（名称：string）：可观察{
返回此.http.get（'https://api.github.com/users/"姓名",；
}
}

app.component.html

单击事件将发出我在每次按钮单击中选择的按钮

托普芬基
罗兰
卢卡斯
{{user.name}
{{user.location}

应用程序组件.ts

声明要订阅的主题，单击按钮。 debounceTime设置为500ms，在发出所选选项之前将等待500ms

从'@angular/core'导入{Component，OnInit，OnDestroy}；
从“rxjs”导入{Subject，observeable，Subscription}；
从“rxjs/operators”导入{switchMap，debounceTime}；
从“./models/User”导入{User}；
从'@angular/common/http'导入{HttpClient}；
@组成部分({
选择器：'应用程序根'，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']，
})
导出类AppComponent实现OnInit、OnDestroy{
用户：用户；
tabclickSubject=新主题（）；
认购：认购；
构造函数（私有http:HttpClient）{}
恩戈尼尼特（）{
此.getUser（'topfunky'）.subscribe(
用户=>{
this.user=用户；
}
);
this.subscribeToButtonClick（）；
}
恩贡德斯特罗（）{
this.subscription.unsubscripte（）；
}
subscribeToButtonClick（）{
this.subscription=this.tabclickSubject.pipe(
去BounceTime（500），
开关映射（选项=>{
如果（选项==1）{
返回这个.getUser（'topfunky'）；
}否则如果（选项===2）{
返回此.getUser（'roland'）；
}否则{
返回此.getUser（'lukas'）；
}
})
).订阅（响应=>{
this.user=响应；
});
}
getUser（名称：string）：可观察{
返回此.http.get（'https://api.github.com/users/"姓名",；
}
}

选项卡ClickSubject具体做什么？为什么我需要它？我试过你的答案，但在我的情况下不起作用。原因是，我没有在pageonit上加载数据，我的第一个和后续数据只加载在onTabSelect中的一个方法上（我在上面发布的代码）。订阅按钮点击页面它让我很困惑。我需要把这一行放在pageonit中吗？我使用了一个observable，当按钮点击时它会发出值，我可以在以后订阅它，以便在每次点击按钮时接收最新的值。为了从按钮单击中获取值，我必须继续听它，这就是subscribeToButtonClick中所做的。通过从PageOnit调用它，我在创建组件后开始监听它。我会一直听，直到组件被破坏。tabclickSubject到底做什么？为什么我需要它？我试过你的答案，但在我的情况下不起作用。原因是，我没有在pageonit上加载数据，我的第一个和后续数据只加载在onTabSelect中的一个方法上（我在上面发布的代码）。订阅按钮点击页面它让我很困惑。我需要把这一行放在pageonit中吗？我使用了一个observable，当按钮点击时它会发出值，我可以在以后订阅它，以便在每次点击按钮时接收最新的值。为了从按钮单击中获取值，我必须继续听它，这就是subscribeToButtonClick中所做的。通过从PageOnit调用它，我在创建组件后开始监听它。我会一直听，直到组件被销毁

onTabSelect(event: MatTabChangeEvent) {
this.categoryId = this.sections[event.index].categoryId;
this.designService.getDesignsByCategoryId(this.categoryId)
.subscribe(
   (design: any[]) => {
     this.designs = design;
     this.designsCount = design.length + ' Designs';
     this.designsLoaded = true;
  },
   error => (this.errorMessage = error)
 );
}