Angular2如何使用下拉选择中的查询参数获取数据答案

【问题标题】：Angular2 How to get data using query params from dropdown selectionAngular2如何使用下拉选择中的查询参数获取数据
【发布时间】：2017-03-27 09:20:03
【问题描述】：

您好，我想使用 queryParams 从服务器获取数据。

目前我有 ngFor 选项的选择，在我选择一个选项后，

我想以某种方式存储它，并希望组件重定向到另一个路由（附加 queryParams），该路由可以根据选择从服务器获取相应的数据。

我认为应该有服务来获取数据， 2 个带有模板的组件，一个用于显示选择，另一个使用上述服务执行http get请求。

但我不知道如何进行这些操作。

以下是我目前拥有的代码。

html文件

 <select [(ngModel)]="selected_region"> 
  <option (click)="onSelect0()" *ngFor="let region of regions">
  {{region.areaName}}
  </option>
 </select>

组件

onSelect0() {
    this.selected_region = //I don't know what to add here.
  }

onSubmit() {
     this.router.navigate(['../teacherlist']);
  }

在教师列表组件中..

constructor(
        private _location: Location,
        private searchTeacher: SearchTeacherService) { }

    ngOnInit():void { 
        this.searchTeacher.getTeachers() //I think I should add queryParams here but I don't know how
    }

请帮忙！

【问题讨论】：

angular-2-training-book.rangle.io/handout/routing/…
点击onSelect0()你想要选择哪个区域还是做任何与路由器参数相关的事情，即你想根据导航路由器url选择区域????
注意：onSelect0 方法不是必需的，因为您已经使用了[(ngModel)]，它将更新您的selected_region 变量。

标签： angular http get routing

【解决方案1】：

如下定义你的路由器：

{ path: '../teacherlist/:id', component: TeacherListComponent }

发送参数如下：

this.router.navigate(['../teacherlist', this.selected_region]);

如下接收（在 TeacherListComponent 中）：

ngOnInit() {
  this.route.params
    // (+) converts string 'id' to a number
    .switchMap((params: Params) => this.searchTeacher.getTeachers(+params['id']))
    .subscribe((hero: Hero) => this.hero = hero);
}

【讨论】：