どのようangular4

Question

でサービスからデータを返すためにAngular1x background.Iから来るが、これは私のNG4サービスが

から上記のサービスを消費する

import { Injectable } from '@angular/core'; 
import {Http} from '@angular/http'; 

@Injectable() 
export class DataService { 
    private _http : Http; 

constructor(http:Http) { 
    this._http = http; 
} 


public GetPosts() : any{ 
this._http.get("https://jsonplaceholder.typicode.com/posts").subscribe(data => { 
    const posts = data.json(); 
    console.log(posts); // logs the desired json 
    return posts; 
})}} 

どのように見えるかですAngular4

に私の既存のアプリケーションを移行しています成分。 Angular1Xで

import { Component, OnInit } from '@angular/core'; 
import {Customer} from './customer.model'; 
import {DataService } from '../../providers/data.service'; 

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

export class CustomerComponent implements OnInit { 

private _dService: DataService; 

constructor(dService:DataService) { 
this._dService = dService;} 

ngOnInit() {} 


public GetAll(){ 
    let posts =this._dService.GetPosts(); 
    debugger; 
    console.log(posts); // undefined 
/* here the posts is getting UNDEFINED (error) */ 
}} 

、私はngServiceからの約束を返すために使用されるが、どのように同じことがangular4で行う??購読する

Answer 1

コールは、コンポーネントではなく、サービスで観測可能に加入しなければならないコンポーネントのコード

Answer 2

にする必要があります。

public GetPosts() : any{ 
    return this._http.get("https://jsonplaceholder.typicode.com/posts"); 
} 

そして、あなたのコンポーネントで

this._dService.GetPosts().subscribe(data => { 
    const posts = data.json(); 
    console.log(posts); 
    // Do whatever you like with posts 

)}; 

Answer 3

constructor(private http:Http) { } 

getPosts(){ 
    return this.http.get('https://jsonplaceholder.typicode.com/posts').map(
     (response: Response) => { 
        return response.json(); 
     } 
    ) 
} 

とコンポーネントでサービス中： あなたが宣言するベストプラクティス：

data : any; 

this._dService.GetPosts().subscribe(
     data => {this.data = data; 
     console.log(this.books);}, 
     err => {console.log(err);}, 

    ()=> {console.log("terminated");} 
    );