Question

我正在使用带有打字稿的Angular 2.0.0-beta.0。我能够在没有任何问题的情况下使用window ['fetch']开启ajax调用（我不需要使用早期版本中所需的任何变通方法。）

但我无法使用angular2的http进行相同的ajax调用。

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

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

boot.ts：

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'

bootstrap(AppComponent, [HTTP_PROVIDERS]);

的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>

Answer 1

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

On bootstrap：

import {HTTP_PROVIDERS} from 'angular2/http';

和

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

在使用该服务的组件上：

从＆＃39; angular2 / http＆＃39;中导入{HTTP_PROVIDERS};

@Component（{

...

提供者：[HTTP_PROVIDERS]

...
}）

Answer 2

当我使用旧版本的TypeScript编译器时，我遇到了类似的问题。我通过将构造函数参数从http: Http更改为@Inject(Http) http: Http来修复它。当然，您需要导入Inject才能使用它。

我尝试在https://code.angularjs.org/tools/system.js使用SystemJS版本，而不是在rawgithub.com上发布。

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

2 个答案: