http未在angular2中定义

Question

I'm trying to make a REST Api call to my other localhost server, I've made this service:

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {GlobalService} from '../app.service';

@Injectable()
export class AuthenticationService {
    constructor(private _globals: GlobalService) {}
    constructor(private _http: Http) {}
    globals = this._globals.getGlobals()

    getAuthenticationData() {
        this._http.get(globals.apiURL)
    }
}

And calling it in my component:

import { Component } from 'angular2/core';
import {AuthenticationService} from '../services/authentication.service';

@Component({
    selector: 'wd-header';
    templateUrl: 'app/templates/header.html'
    providers: [AuthenticationService]
})

export class HeaderComponent {
    constructor(private _authenticationService: AuthenticationService) {}
    authentication = this._authenticationService.getAuthenticationData()
}

For some reason though, Angular claims that Http is undefined:

EXCEPTION: Error during instantiation of HeaderComponent!. angular2.dev.js:22911:9

ORIGINAL EXCEPTION: TypeError: this._http is undefined

What am I doing wrong?

Edit to include main.ts:

import {bootstrap}    from 'angular2/platform/browser';

import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from './app.component';
import {GlobalService} from './app.service';

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    GlobalService
]);

Answer 1

I think that the problem in your code is that you use two constructors in your AuthenticationService .

Try to edit it like this:

constructor(private _globals: GlobalService, private _http: Http) {}

And add a return statement in getAuthenticationData() .

Let me know if it fixes it.

Answer 2

I would refactor the code of your service this way:

@Injectable()
export class AuthenticationService {
  constructor(private _globals: GlobalService, private _http: Http) {
    this.globals = this._globals.getGlobals();
  }

  getAuthenticationData() {
    return this._http.get(this.globals.apiURL);
  }
}

You need to have only one constructor for your service and initialize the globals property into this constructor.

Be also careful to use the "this" keyword to reference class properties from the class itself.