Angular5：サービスからコンポーネントへのHttpClient応答を返しますか？

Question

私は現在Angular 5を学習しており、サービスからコンポーネントにデータを渡すことができません。
orderers.component.ts私がサービスにGET_USER（）を転送し、データとパスを返すことができますどのように

import { Component, OnInit } from '@angular/core'; 
import { HttpClient, HttpHeaders } from '@angular/common/http'; 

@Component({ 
    selector: 'app-orderer', 
    templateUrl: './orderer.component.html', 
    styleUrls: ['./orderer.component.css'] }) 


export class OrdererComponent implements OnInit { 

o_manual:boolean = false; 
orderers = []; 

constructor(private http:HttpClient) { } 

ngOnInit() { 
    this.get_users(); 
} 

get_users() { 
    this.http.get('http://angular5.localhost/wp-admin/admin-ajax.php?action=orderers').subscribe(data => { 
     this.orderers = data; 
    } 
} } 

：私はここに私の現在のコードがありますワードプレス...

にこれを統合していますそれはコンポーネントですか？ おかげ.. :)

Answer 1

最初にサービスを作成し、get_users（）関数をコピーします。 すべてのhttp要求はObservable型のオブジェクトを返します。これはsubscribe（）関数を含むオブジェクトです。get_users（）関数で返す必要があります。 何かのように：あなたのモジュールで今

@Injectable() 
    export class SomeNameService { 

     constructor(private http: HttpClient) { 

     } 

     get_users():Observable<any> { 
     return this.http.get('http://angular5.localhost/wp-admin/admin-ajax.php?action=orderers'); 
    } 
} 

あなたはプロバイダの下で、あなたが注入されただけのようなあなたのコンポーネントのHttpClientに注入し、に加入する必要がその後

@NgModule({ 
    imports: [...], 
    declarations: [...], 
    providers: [SomeNameService] 
}) 

を、このサービスをリストする必要がありますあなたのget_users（）関数

constructor(private someService:SomeNameService) { } 
ngOnInit(){ 
this.someService.get_users().subscribe(data=>{ 
    this.orderers = data; 
    }); 
} 

方法で、これは役立ちましたangular.io https://angular.io/tutorial/toh-pt4

希望に大きな例がある

Answer 2

ステップ1

get_users_from_service(): Observable<any> { 
    return this.http.get(...)  // You can also try to catch any exception here 
} 

ステップ2 はコンストラクタでそれを注入した後、コンポーネントでサービスを呼び出すの内側にあなたの機能をあなたのサービスを作成し、配置

get_users() { 
    this.nameOfService.get_users_from_service().subscribe(data => { 
     this.orderers = data; 
    }, 
    error => { 
     // Do something with error 
    } 
}