如何使用angular2/http进行ajax调用？_Http_Dependency Injection_Typescript_Angular

如何使用angular2/http进行ajax调用？

http dependency-injection typescript angular

如何使用angular2/http进行ajax调用？,http,dependency-injection,typescript,angular,Http,Dependency Injection,Typescript,Angular,我将Angular 2.0.0-beta.0与typescript一起使用。我能够使用开箱即用的窗口['fetch']进行ajax调用，没有任何问题（并且我不需要使用早期版本中要求的任何解决方法）但是我不能使用angular2的http进行相同的ajax调用下面是演示该问题的代码。有三个文件，index.html在项目文件夹中，boot.ts和app.component.ts在名为app的子文件夹中 app.component.ts： import {Http, HTTP_PROVIDERS

我将Angular 2.0.0-beta.0与typescript一起使用。我能够使用开箱即用的窗口['fetch']进行ajax调用，没有任何问题（并且我不需要使用早期版本中要求的任何解决方法）

但是我不能使用angular2的http进行相同的ajax调用

下面是演示该问题的代码。有三个文件，index.html在项目文件夹中，boot.ts和app.component.ts在名为app的子文件夹中

app.component.ts：

import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    providers: [HTTP_PROVIDERS],
    template: '<h1>My First Angular 2 App</h1><button (click)="getTasks()">click</button>{{tasks}}'
})
export class AppComponent { 
    http: Http;
    tasks = [];

    constructor(http: Http) {
        alert(http == null);
        this.http = http;
    }

    getTasks(): void {
        this.http.get('http://localhost:3000/tasks/norender');
            //.map((res: Response) => res.json())

            //it is important to have this subscribe call, since the 
            //request is only made if there is a subscriber 
            .subscribe(res => this.tasks = res);
    }   
}

index.html：

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 1. Load libraries -->
        <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
        <script src="https://code.angularjs.org/tools/typescript.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            transpiler: 'typescript', 
            typescriptOptions: {emitDecoratorMetadata: true}, 
            packages: {'app': {defaultExtension: 'ts'}} 
        });
        System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>


角度2快速入门
System.config({
transpiler:'typescript'，
typescriptOptions:{emitDecoratorMetadata:true}，
包：{'app'：{defaultExtension:'ts'}
});
System.import（'app/boot'）
.then（null，console.error.bind（console））；
加载。。。

您应该添加一个Http提供程序。您有两个选择：

在引导过程中：

从'angular2/HTTP'导入{HTTP_PROVIDERS}
以及：
在使用服务的组件上：
从'angular2/HTTP'导入{HTTP_提供者}
@组成部分({

提供者：[HTTP\u提供者]
…

})
当我使用旧版本的TypeScript编译器时，我也遇到了类似的问题。我通过将构造函数参数从http:http
更改为@Inject（http）http:http
来修复它。当然，您需要导入Inject
才能使用它
我会尝试在上使用SystemJS版本，而不是rawgithub.com上的版本。
会出现什么问题/错误？您是否在引导程序中添加了HTTP\U提供程序
？对于我在更新的代码中看到的内容，您需要取消对subscribe
的注释，因为这是触发请求的部分。就是这样！谢谢@EricMartinez，所以它很聪明，只有在结果被消耗时才会发出请求。谢谢在bootstrap（）
和PROVIDERS:[…]中不应该有HTTP_提供程序。挑一个。
<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 1. Load libraries -->
        <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
        <script src="https://code.angularjs.org/tools/typescript.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            transpiler: 'typescript', 
            typescriptOptions: {emitDecoratorMetadata: true}, 
            packages: {'app': {defaultExtension: 'ts'}} 
        });
        System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

ng.bootstrap(src.SomeComponent, [HTTP_PROVIDERS]);