コンポーネントにangle2サービスが渡されました

Question

httpリクエストをコンポーネントから分離してサービスに入れようとしていますが、リクエストから取得したレスポンスをコンポーネントのアクションに渡すにはどうすればいいですか？

角度1のように、コントローラで以下のコードを実行して、サービスでhttpリクエストを実行できます。

var getGenreList = function() { 
      coreGenreService.getGenreList(vm.id) 
       .then(function(response) { 
        console.log(vm.name); 
       }); 
     } 

同じロジックを適用してみましたが、コントローラに応答をどのように渡すことができないのかよくわかりません。

サービス：

getUser(){ 
     this.http.get('http://../api/User?email='+this.customerEmail) 
      .map(response => response.text()) 
      .subscribe(data => { 
       if (data) { 
        var userObj = JSON.parse(data); 
        this.UserEmail = userObj.EmailAddress; 
       } 
     }); 
    } 

私は、これはJSONのOBJSを取得しているが、私は、私はオブジェクト内のすべての値が表示されない検索を行うときには、渡されていないので、私は推測していることがわかりますsearchUser()

searchUser() { 
    this.isLoading = true; 
    if(!this._searchService.getUser()){ 
     setTimeout(() => { 
      this.isLoading = false; 
     }, 500) 
    } 
} 

Htmlの入力構造：あなたはrefactoに必要

<input type="text" name="UserEmail" [(ngModel)]="customerEmail" placeholder="Search customer email"> <br> 
<button (click)="UserCustomer()" class="omni-btn search-btn float-shadow">Search</button> 

Answer 1

Rあなたのサービスこの方法：あなたのコンポーネントで

getUser(customerEmail: string): Observable<string>{ 
    return this.http.get(`http://../api/User?email=${customerEmail}`) 
     .map(response => response.json()); 
} 

を、あなたはこのようなサービスを呼び出すことができます応答のための

searchUser() { 
    this.isLoading = true; 
    this._searchService.getUser(this.customerEmail) 
    .subscribe(user => { 
     this.isLoading = false; 

     // To use for data binding in the component 
     this.user = user; 

     console.log('user = ', user); 
    }); 
}