あるクラスのメソッドの値をTypescriptの別のクラスのメソッドに渡すには？

Question

私はオブジェクト指向プログラミングを初めて学びました。これは、熟練したOOプログラマにとっては簡単なコンセプトであるはずですが、確かに苦労しています。下図のように私のAngular2アプリで

は私がHTTPServiceのクラスを持っている：

http.service.ts

@Injectable() 
export class HttpService { 
    constructor(private http: Http) { } 
    addLeaf(parentId, label, name){ 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     return this.http.post('http://localhost:8000/addleaf/', 
     {'parentId':parentId,'label':label, 'name':name}, 
     { headers: headers }) 
     .map(res => res).subscribe();   
} 

私は以下のように別のクラスの中から、このメソッドを呼び出すようにしてみてください。

リーフ.ts

import { HttpService } from './http.service'; 

export class Leaf{ 
name: string; 
... 
http: Http; // very unsure about these two lines 
private httpService: HttpService = new HttpService(this.http) 
constructor(input){ 
    this.name = input.name; 
... 
add(){ 
    //what should go here? 
    this.httpservice.addLeaf(this.id, this.label, this.name); 
    //error -> cannot read property 'post' of undefined 
} 

thisを読むと、HttpServiceクラスのインスタンスを作成しようとしましたが、投稿機能が存在しないというエラーが表示されます。コンストラクタにhttpServiceを置くことも無駄です。

私はこのように私のhtmlでのメソッド呼び出し

：

(click)="leaf.add()" 

EDIT：示すように、私はleaf.tsを変更し、leaf.component.tsを追加peeskilletの答え@以下：

葉.TS

export class Leaf{ 
    name: string; 
    ... 
    constructor(input){ 
     this.name = input.name; 
     ... 
    add(){ 
     //what should go here? 
    } 
} 

leaf.component.ts

@Component({ 
    providers: [HttpService], 
}) 

export class LeafComponent { 
    leaf: Leaf; 
    constructor(private httpService: HttpService) { 
     this.httpService.addLeaf(this.leaf.id, this.leaf.type, this.leaf.name) 
    } 
} 

サービスは、私がのparamsの代わりに事前定義された文字列を書く場合は正常に動作しますが、それでも私はこれにクリックされた葉のパラメータを渡すことができるかどうかはわかりません。

Answer 1

角度は、dependency injectionとInversion of Controlです。これは、サービスを自分で作成するのではなく、Angularが作成するようにすることを意味します。次に、サービスのためにをに依頼すると、Angularはサービスが持つすべての依存関係を解決します。 ServiceはHttpで依存関係を持つ、例えば

ここ

@Injectable() 
class Service { 
    constructor(private http: Http) {} 
} 

してください。 Httpは、私たちが薄い空気から掴むだけのものではありません。

let service = new Service(new Http()); 

Httpも他のサービスに依存しています。ここではそのコンストラクタは

class Http { 
    constructor(backend: ConnectionBackend, options: RequestOptions) {} 
} 

あなたは多分あなただけ ConnectionBackendと RequestOptions

new Http(new ConnectionBackend(), new RequestOptions())` 

でそれをインスタンス化することができますしかし、あなたは、このいずれかを行うことができないと思うかもしれない

どのように見えるかConnectionBackendも必要とされてきた依存関係など。この理由から、Inversion of Controlを使用しています。サービスをコンテナに追加するだけで、サービスを依頼するときには、アングルルックアップサービスが必要です（Http）。HttpはConnectionBackendとRequestOptionsなどが必要です。また、Angularはすべてのアイテムを作成しますそのすべてのアイテムのレジストリに、Voltronのようにすべて一緒に置いてください。それから私たちにサービスが提供されます。

だから、いつでも私たちその後、我々は、今@NgModule.providers

@NgModule({ 
    imports: [ HttpModule ], 
    providers: [ Service ] 
}) 
class AppModule {} 

に追加する必要があり、我々は最初のサービス

@Injectable() 
class Service { 
    constructor(private http: Http) {} 
} 

にInjectableデコレータを追加する必要があり、コンテナに当社のサービスを追加Serviceを要求すると、Http（これはHttpModuleにあります）が完全に入力されます。我々はサービスを求める方法

（ETCディレクティブ、パイプ、）別のサービスまたはコンポーネントのいずれかのコンストラクタである

@Component({ 
}) 
class MyComponent { 
    constructor(private service: Service) {} 
} 

コンストラクタの引数としてServiceタイプを見て、角度は、ルックアップするために知っていますServiceを容器に入れ、それを私たちに渡してください。これは、Dependency InjectionとInversion of Controlの基本です。

Leafの場合サービスであることを意味しているされている場合は、同じ

@Injectable() 
class Leaf { 
    constructor(private service: Service) {} 
} 

@NgModule({ 
    imports: [ HttpModule ], 
    providers: [ Leaf, Service ] 
}) 
class AppModule {} 

を行うことができますが、プロバイダとしてLeafを追加したくない場合は、する必要はありません。ちょうど

@Component({}) 
class MyComponent { 
    leaf: Leaf; 

    constructor(private service: Service) { 
    this.leaf = new Leaf(service); 
    } 
}