Service Angular2：将Http注入服务的问题

我正在使用angular2，在将

Http

注入另一个服务时遇到问题

这是我的

boot.ts

文件：

import { bootstrap } from 'angular2/platform/browser';
import { provide } from 'angular2/core';
import { AppComponent } from './app.component';
import { appInjector } from './app-injector';
import { LoginService } from './services/login.service';
import { HTTP_PROVIDERS, Http } from 'angular2/http';
import { RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
        LocationStrategy, HashLocationStrategy} from 'angular2/router';

bootstrap(AppComponent, 
    [ROUTER_PROVIDERS, LoginService, provide(
        LocationStrategy, {useClass: HashLocationStrategy}
        )] 
    ).then((appRef) => {
  // store a reference to the injector
  appInjector(appRef.injector);

});

import {Component} from 'angular2/core';
import {RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
        LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {LoginService} from './services/login.service';
import {HTTP_PROVIDERS, Http} from 'angular2/http';

@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.tpl.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [LoginService, HTTP_PROVIDERS]
})

export class AppComponent {

    constructor(private _loginService: LoginService) { }


    login() {
        this._loginService.login();
    }
}

import {Injectable} from 'angular2/core';
import {Http,Headers} from 'angular2/http';

@Injectable()

export class LoginService{

    http: Http;

    constructor(_http: Http) { 
        this.http = _http;
    }

    login(){
        // do sth
    }
}

这是我的

app.component.ts

文件：

import { bootstrap } from 'angular2/platform/browser';
import { provide } from 'angular2/core';
import { AppComponent } from './app.component';
import { appInjector } from './app-injector';
import { LoginService } from './services/login.service';
import { HTTP_PROVIDERS, Http } from 'angular2/http';
import { RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
        LocationStrategy, HashLocationStrategy} from 'angular2/router';

bootstrap(AppComponent, 
    [ROUTER_PROVIDERS, LoginService, provide(
        LocationStrategy, {useClass: HashLocationStrategy}
        )] 
    ).then((appRef) => {
  // store a reference to the injector
  appInjector(appRef.injector);

});

import {Component} from 'angular2/core';
import {RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
        LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {LoginService} from './services/login.service';
import {HTTP_PROVIDERS, Http} from 'angular2/http';

@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.tpl.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [LoginService, HTTP_PROVIDERS]
})

export class AppComponent {

    constructor(private _loginService: LoginService) { }


    login() {
        this._loginService.login();
    }
}

import {Injectable} from 'angular2/core';
import {Http,Headers} from 'angular2/http';

@Injectable()

export class LoginService{

    http: Http;

    constructor(_http: Http) { 
        this.http = _http;
    }

    login(){
        // do sth
    }
}

下面是有问题的

login.service.ts

文件：

import { bootstrap } from 'angular2/platform/browser';
import { provide } from 'angular2/core';
import { AppComponent } from './app.component';
import { appInjector } from './app-injector';
import { LoginService } from './services/login.service';
import { HTTP_PROVIDERS, Http } from 'angular2/http';
import { RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
        LocationStrategy, HashLocationStrategy} from 'angular2/router';

bootstrap(AppComponent, 
    [ROUTER_PROVIDERS, LoginService, provide(
        LocationStrategy, {useClass: HashLocationStrategy}
        )] 
    ).then((appRef) => {
  // store a reference to the injector
  appInjector(appRef.injector);

});

import {Component} from 'angular2/core';
import {RouteConfig,  ROUTER_DIRECTIVES, ROUTER_PROVIDERS,
        LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {LoginService} from './services/login.service';
import {HTTP_PROVIDERS, Http} from 'angular2/http';

@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/app.tpl.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [LoginService, HTTP_PROVIDERS]
})

export class AppComponent {

    constructor(private _loginService: LoginService) { }


    login() {
        this._loginService.login();
    }
}

import {Injectable} from 'angular2/core';
import {Http,Headers} from 'angular2/http';

@Injectable()

export class LoginService{

    http: Http;

    constructor(_http: Http) { 
        this.http = _http;
    }

    login(){
        // do sth
    }
}

问题在于

login.service.ts

文件中的

构造函数

当我删除构造函数中的参数时（离开
constructor（）{}
），页面呈现正常。当我保留
Http
参数时，页面不会呈现，而是在浏览器控制台中看到：
Uncaught SyntaxError:Unexpected token您在两个文件中使用Http模块，但Http\u提供程序导入仅在组件中。将其从组件中删除并添加到启动文件中

bootstrap(AppComponent, 
    [HTTP_PROVIDERS, ROUTER_PROVIDERS, LoginService, provide(
        LocationStrategy, {useClass: HashLocationStrategy}
        )] 
    ).then((appRef) => {
  // store a reference to the injector
  appInjector(appRef.injector);

});

您在两个文件中使用Http模块，但Http\U提供程序导入仅在组件中。将其从组件中删除并添加到启动文件中

bootstrap(AppComponent, 
    [HTTP_PROVIDERS, ROUTER_PROVIDERS, LoginService, provide(
        LocationStrategy, {useClass: HashLocationStrategy}
        )] 
    ).then((appRef) => {
  // store a reference to the injector
  appInjector(appRef.injector);

});

我认为您忘记将http.dev.js文件添加到HTML文件中：

<script src="node_modules/angular2/bundles/http.dev.js"></script>



这应该是导致错误的原因：“意外标记我认为您忘记将http.dev.js文件添加到HTML文件中：

<script src="node_modules/angular2/bundles/http.dev.js"></script>



这应该是导致错误的原因：“意外令牌