Angular 2 http.get 带参数

服务器

Angular 2中的http.get方法是用于向服务器发送GET请求并获取响应数据的常用方法。而有时我们需要在GET请求中传递一些参数，以便服务器能够根据这些参数返回特定的数据。本文将介绍如何在Angular 2中使用http.get方法传递参数，并提供一个案例代码以帮助读者更好地理解。

在Angular 2中，我们可以通过在http.get方法的URL中添加查询参数来传递参数。查询参数由参数名和参数值组成，使用等号连接。例如，我们要传递一个名为"category"的参数，其值为"technology"，则可以将其添加到URL中，如下所示：

Javascript
import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxJS/Observable';
import 'rxJS/add/operator/map';
@Injectable()
export class DataService {
  constructor(private http: Http) {}
  getData(category: string): Observable<any> {
    let url = 'https://api.example.com/data?category=' + category;
    return this.http.get(url)
      .map((response: Response) => response.JSon());
  }
}

在上述代码中，我们首先导入了Http、Response和Injectable类，以及Observable和map操作符。然后，我们创建了一个名为DataService的服务，并在构造函数中注入了Http类的实例。在getData方法中，我们将传入的category参数添加到URL中，并使用http.get方法发送GET请求。最后，我们使用map操作符从响应对象中提取JSON数据。

下面是一个使用上述DataService服务的组件的示例代码：

Javascript
import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
  selector: 'app-root',
  template: <code>
    <h1>数据列表</h1>
    <ul>
      <li *ngFor="let item of data">{{ item.name }}</li>
    </ul>
  </code>,
  providers: [DataService]
})
export class AppComponent {
  data: any[];
  constructor(private dataService: DataService) {}
  ngOnInit() {
    this.dataService.getData('technology')
      .subscribe((data: any[]) => {
        this.data = data;
      });
  }
}

在上述代码中，我们创建了一个名为AppComponent的组件，并在构造函数中注入了DataService服务的实例。在ngOnInit生命周期钩子中，我们调用了DataService服务的getData方法，并传递了参数"technology"。当获取到数据后，我们将其赋值给组件的data属性，并在模板中使用*ngFor指令循环渲染数据列表。

通过上述示例代码，我们学习了如何在Angular 2中使用http.get方法传递参数。我们首先创建了一个名为DataService的服务，并在其中使用http.get方法发送GET请求，并通过添加查询参数来传递参数。然后，我们创建了一个使用DataService服务的组件，并在其中调用了getData方法，获取并展示了服务器返回的数据。希望本文能够帮助读者更好地理解Angular 2中http.get方法的参数传递方式。