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

我正在使用Angular 2.0.0-beta.0和typescript.我能够在没有任何问题的情况下使用window [‘fetch’]开启ajax调用(我不需要使用早期版本中所需的任何变通方法.)

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

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

app.component.ts：

@H_301_7@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：

@H_301_7@import {bootstrap} from 'angular2/platform/browser' import {HTTP_PROVIDERS} from 'angular2/http'; import {AppComponent} from './app.component' bootstrap(AppComponent,[HTTP_PROVIDERS]);

index.html的：

@H_301_7@<!DOCTYPE html> <html> <head> <title>Angular 2 QuickStart</title>  <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>  <script> System.config({ transpiler: 'typescript',typescriptOptions: {emitDecoratorMetadata: true},packages: {'app': {defaultExtension: 'ts'}} }); System.import('app/boot') .then(null,console.error.bind(console)); </script> </head>  <body> <my-app>Loading...</my-app> </body> </html>

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

>在引导程序上：

从’angular2 / http’导入{HTTP_PROVIDERS};

和：

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

>在使用该服务的组件上：

从’angular2 / http’导入{HTTP_PROVIDERS};

@零件({

…

提供者：[HTTP_PROVIDERS]

…})

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

猜你在找的Angularjs相关文章