简体   繁体   中英

http is not defined in angular2

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

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.

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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM