[英]Angular2: issue injecting Http into service
我正在使用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);
});
這是我的app.component.ts
文件:
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();
}
}
這是令人討厭的login.service.ts
文件:
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
中。
當我刪除構造函數中的參數時(離開constructor(){}
),頁面呈現正確。 當我保留Http
參數時,該頁面不會呈現,而是在瀏覽器控制台中看到: Uncaught SyntaxError: Unexpected token <
error。
我需要將Http
注入我的LoginService
,但是我找不到問題所在。 我看過一些博客和SO問題,例如, 在這里 ,但是沒有運氣。
您在兩個文件中使用Http模塊,但HTTP_PROVIDERS導入僅在組件中。 從組件中刪除它並添加到您的啟動文件中。
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>
這可能是導致錯誤的原因:“意外令牌<”。
希望對您有幫助,蒂埃里
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.