Question

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

目前我已经选择了ngFor选项，在我选择了一个选项后，

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

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

但我不知道如何处理这些。

以下是我目前的代码。

html文件

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

成分</ P>

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
    }

请帮助！

Answer 1

按如下方式定义路由器：

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

发送params如下：

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

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

1 个答案: