typescriptを使用してインポートされたサービスにアクセスする際にAngular2エラーが発生する

Question

ユーザーが必要な詳細を入力し、サーバーコールを行い、必要な詳細を保存するフォームを作成しようとしています。しかし、私が何をしてもこのエラーが出ています。メインapp.component.tsためORIGINAL EXCEPTION: TypeError: this.postService is undefined 私のコードは次のとおりです。私は、以前の「しようとしたpostService

/// <reference path="../typings/tsd.d.ts" /> 
import {Component} from 'angular2/core'; 
import {HTTP_PROVIDERS} from 'angular2/http'; 
import {ControlGroup, Control, Validators, FormBuilder} from 
'angular2/common'; 
import {PostService} from './post.service' 

@Component({ 
selector: 'my-app', 
template:` 

<form [ngFormModel]="form" (ngSubmit)="signup()"> 

<div class="form-group has-error has-feedback"> <div class="input-group"> 

      <input type="text" id="email_id" type="text" 
ngControl = "email_id" #email_id="ngForm" value = email_id > 

     </div> </div> 
<div class="form-group has-error has-feedback"> <div class="input-group"> 

      <input type="password" id="password" type="text" 
ngControl = "password" #password="ngForm" value = password> 

</div> </div> 

<button class="btn btn-primary" type="submit">Sign Up</button> 
</form> 
`, 
providers:[PostService, HTTP_PROVIDERS] 


}) 

export class AppComponent { 

form: ControlGroup; 
postService:PostService; 
constructor(fb: FormBuilder){ 
     this.form = fb.group({ 
      email_id: ['',Validators.required], 
      password: ['',Validators.required] 
     });  
} 
signup(){ 
this.postService.createPost({ email: this.form.value.email_id, 
password: this.form.value.password }); 

} 
} 

：PostService in the constructor but then also I was getting the same error that postService`がundifinedされます。

post.service.tsコードは次のようである：私はこの問題を修正し、サーバーに正常にフォームからデータを送信し、応答を表示することができますどのように

import {Http} from 'angular2/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/toPromise'; 
import {Injectable} from 'angular2/core' 
import {Post} from './post'; 
import {Observable} from 'rxjs/Observable'; 


@Injectable() 
export class PostService { 
//dependency injection 
private _url = "http:127.0.0.1/accounts/login_user/"; 
constructor(private _http:Http) { 

} 


createPost(post:Post){ 

    return this._http.post(this._url,JSON.stringify(post)) 
    .map(res=>res.json()); 
} 
} 

。何人かは私を助けてくれる？

ありがとうございます。

Answer 1

あなたのコンポーネントに注入する必要があります。

export class AppComponent { 
    form: ControlGroup; 

    constructor(fb: FormBuilder, private postService:PostService){ <---- 
    (...) 
    } 

    (...) 
} 

は、コンポーネントのプロバイダでこのサービスを指定することを忘れないでください：

@Component({ 
    providers: [ PostService ] 
}) 
export class AppComponent { 
    (...) 
} 

や主要コンポーネントをブートストラップ。 AppComponentで

bootstrap(AppComponent, [ PostService ]); 

Answer 2

サービスを注入する必要があります

constructor(fb: FormBuilder, this postService:PostService){