개체 속성을 구성 요소에서 서비스로 전달하거나 전달하지 않습니까?

Question

저는 Observables, Promises, Angular 2를 처음 사용하고 아키텍처와 모범 사례를 이해하려고합니다.

나는 다음과 같다 앱 구성 요소가 :

export class AppComponent { 

    items: Item[] = // some Items in here 
    totalSalesLastThirtyDays: number = 0 

    constructor (private itemTransactionsService: ItemTransactionsService) {} 

    ngOnInit() { 
    this.itemTransactionsService.getLastThirtyDays(this.items) 
    } 
} 

I는 다음과 같습니다 서비스가 있습니다

@Injectable() 
export class ItemTransactionsService { 

    constructor (private http: Http) {} 

    getLastThirtyDays(items: Item[]) { 
    /// How do I know when all the observables have completed 
    /// and I can compute the totalSalesLastThirtyDays? 
    /// Where would I set totalSalesLastThirtyDays property of AppComponent? 
    for (let item of items) { 
     this.getItemTransactions(item).subscribe(result => { 
         // console.dir("result = " + result); 
         item.soldInLast15Days = result[0] 
         item.soldInLast30Days = result[1]      
         }, 
         error => {}) 
    } 
    } 



    getItemTransactions(item: Item): Observable<any> { 
    // Work work work 
    return this.http.post(this.url, body, options) 
        .map(this.extractData) 
        .catch(this.handleError); 
    } 
} 

궁극적으로 모든 getItemTransactions가 호출 각각에 반환 ​​된 때 item, totalSalesLastThirtyDays를 계산하려면 totalSalesLastThirtyDays가 AppComponent의 속성입니다.

이 작업을 수행하는 "각도 2"아키텍처 방식은 무엇입니까?

서비스에 대한 참조로 totalSalesLastThirtyDays를 전달합니까? getLastThirtyDays의 관측 값을 사용하여 계산 된 totalSalesLastThirtyDays를 다시 전달하여 AppComponent에 설정합니까? for-loop의 모든 API 호출이 완료되었고 totalSalesLastThirtyDays를 계산할 수 있다는 것을 어떻게 알 수 있습니까?

이 질문에 대한 좋은 제목이 무엇이 될지 모르겠으므로 생각해 볼 수 있으면 좋습니다.

Answer 1

여기에 RXjs 우편 연산자를 사용합니다.

서비스

import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class ItemTransactionsService { 

    constructor (private http: Http) {} 

    getLastThirtyDays(items: Item[]) { 
    return Observable.zip(
     ...items.map(item => { 
     return this.getItemTransactions(item); 
     }) 
    ).map((data: Array<any>) => { 
    // You get array of responses here 
    // Do your calculations and return it 
    return data; 
    }); 
} 

getItemTransactions(item: Item): Observable<any> { 
    // Work work work 
    return this.http.post(this.url, body, options) 
       .map(this.extractData) 
       .catch(this.handleError); 
} 
} 

구성 요소

export class AppComponent { 

    items: Item[] = // some Items in here 
    totalSalesLastThirtyDays: number = 0 

    constructor (private itemTransactionsService: ItemTransactionsService) {} 

    ngOnInit() { 
    this.itemTransactionsService.getLastThirtyDays(this.items) 
     .subscribe(totalSales => { 
     this.totalSalesLastThirtyDays = totalSales; 
     }) 
    } 
}