Jak wywołać ajax z kątowym2/http

Używam Angular 2.0.0-beta.0 z maszynopis. Udało mi się bez problemu wywołać wywołanie ajax z okienkiem ['pobieranie'] (i nie musiałem używać żadnego z obejść wymaganych we wcześniejszych wersjach).Jak wywołać ajax z kątowym2/http

Ale nie mogłem zrobić tego samego wywołanie ajaxowe działające na http od angular2.

Oto kod do demonstracji problemu. W folderze projektu znajdują się trzy pliki: index.html oraz boot.ts i app.component.ts w podfolderze o nazwie 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); 
    } 
}

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>

Źródło

2015-12-26 Peter Pei Guo

Jaki byłby problem/błąd? –

Czy dodałeś 'HTTP_PROVIDERS' w swoim bootstrap? –

Sposób, w jaki próbowałeś, jest poprawny. Właśnie zauważyłem, że jesteś bootstraping w System.import. Nie widziałem tego wcześniej, czy to działa dla ciebie? Czy możesz spróbować bootstraping w tym samym pliku 'SomeComponent'? Pamiętaj o zaimportowaniu 'HTTP_PROVIDERS' z' angular2/http'. –

Należy dodać dostawcę HTTP. Masz dwie opcje:

On bootstrap:

import {HTTP_PROVIDERS} from 'angular2/http';

oraz:

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

na komponencie korzystania z usługi :

i mport {HTTP_PROVIDERS} z "kątowego2/http";

@Component ({

...

dostawcy [HTTP_PROVIDERS]

...
})

Źródło

2015-12-26 21:17:21

miałem podobny problem, gdy stosuje się starą wersję kompilatora TypeScript. Naprawiłem to, zmieniając argument konstruktora z http: Http na @Inject(Http) http: Http. Oczywiście, aby go użyć, musisz zaimportować Inject.

Spróbowałbym użyć wydania SystemJS pod adresem https://code.angularjs.org/tools/system.js zamiast wersji na rawgithub.com.

Źródło

2015-12-27 03:04:19 user934904

Odpowiedz

Powiązane problemy