Question

我是angular2的新手。我想进行服务器调用以从我的服务器获取数据。实际上我知道如何在angular1.x中做到这一点，但我无法弄清楚它是如何在angular-2中完成的。

这是我在angular1.x

中尝试的方法

控制器：

var pageId = 0;
$scope.getProducts = function () {
    NewProducts.query({
      pageId: pageId,
      activeFilter: 1
    }).$promise.then(function (res) {
      $scope.products= res;
      pageId++;
    }).catch(function (err) {
      console.log('Error happened : ' + JSON.stringify(err));
    });
  };

服务：

.constant('API_HOST', 'http://www.myproductssite.com')
.factory('NewProducts', function ($resource, API_HOST) {
  return $resource(API_HOST + '/prods/page/:pageId/:activeFilter', {
    pageId: '@pageId',
    activeFilter: '@activeFilter'
  }, {
    'query': {
      method: 'GET',
      isArray: true,
      timeout: 20000
    }
  } );
})

HTML

<div ng-init="getProducts();">
Res->{{products | json}}
</div>

这是我如何使用$ resource Get方法构建一个angular1.x应用程序以进行服务器调用。我不知道如何在angular-2中做到这一点。有没有办法在angular-2中做到这一点。请帮我说明怎么做？感谢。

Answer 1

Angular中的AJAX调用是使用Http服务完成的，如下所示：

import { Http } from '@angular/http';

// ... code ...
let memberInfo;
http.get(url)
    .map(x => x.json()).
    subscribe(result => this.memberInfo = result);

执行异步HTTP GET调用，将返回值放在memberInfo变量中。

Answer 2

为了获得最佳实践，请创建一个新文件（服务）。并做如下。

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

@Injectable()
export class Api{

constructor(private http: Http){}
  request(){
     return this.http.get(baseUrl);
   }
}

在您的组件中，您可以执行此操作。

this.service.request().subscribe((res)=>{
  console.log('response',res');
},(err)=>{
 console.log(err)
}
)

reference link

Answer 3

在angular2中，您可以使用Http服务，例如：

"broadcast": {
    "ghjghjFc1S3KO0y8yJwORdfgret": {   //user ID
         "ryrtybgzMiI858YyGua": {  //broadcast ID
              "a": "xxx",   // broadcast Detail
              "b": "yyy",
              "c": false
         }
         "cbvbcvbMvAnSDqTb15vU": {  //broadcast ID
              "a": "xxx",   // broadcast Detail
              "b": "yyy",
              "c": true
         }
    }
    "3uqWZJRFc1S3KO0y8yJwORTMtWC2": {   //user ID
         "jkhjkbgzMiI858YyGua": {  //broadcast ID
              "a": "xxx",   // broadcast Detail
              "b": "yyy",
              "c": false
         }
         "qwwerqweMvAnSDqTb15vU": {  //broadcast ID
              "a": "xxx",   // broadcast Detail
              "b": "yyy",
              "c": true
         }
    }
}

Answer 4

我个人更喜欢打一个普通的电话服务。从任何组件，我将通过传递params来调用此getCall方法。

  public getCall(baseUrl:string, url:string, queryParams ?:any) {
    let _url = baseUrl + url;
    if (queryParams) {
      _url = this.appendQueryParams(_url, queryParams);
    }
    let options = new RequestOptions({
      headers: new Headers();
    });
    return this._http.get(_url, options);
  }



 public appendQueryParams(url:string, queryParams:any) {
     let queryParamString:string = "";
     _.forEach(queryParams, function (value, key) {
        queryParamString += key.trim() + "=" + value + "&";
     });
     queryParamString = queryParamString.slice(0, -1);
     queryParamString = encodeURI(queryParamString);
     url += "?" + queryParamString;
     return url;
}

在服务中：

  getProducts(queryParams){
    return this._callService.getCall("http://www.myproductssite.com",'/prods/page/'+pageId+'/'+activeFilter, queryParams).map(res => res.json());
  }

如何在angular-2中进行服务器api调用？

这是我在angular1.x

控制器：

服务：

HTML

4 个答案: