2016-10-25 6 views
2

Angular2 및 observables를 처음 사용했습니다. 나는 관찰자의 사슬의 결과를 내 결의의 자에게 돌려 주려고 노력하고있어, 그래서 그 대답을 찾을 수 없었다. 하나의 관측 대상 만 반환하면 모든 것이 잘 작동하지만 연결된 경우 실패합니다.각도 2 : Resolver의 Chain Observables

@Injectable() 
export class SwResolve implements Resolve<any> { 
    constructor(private swService: SwService) {}  
     resolve (route: ActivatedRouteSnapshot): Observable<MyObject> | Promise<any> | any { 
      this.swService.getTestData().subscribe(data => { 
       return this.swService.getTestData(); 
      }); 
     } 
} 

SwComponent가 :

export class SwComponent implements OnInit {constructor(
    private route: ActivatedRoute, 
    private router: Router 
) { } 

    ngOnInit(): void { 
    this.route.data.forEach((data: any) => { 
     // Handle data received 
    }); 
    } 
}; 

가 SwService :

getTestData() { 
    return Observable.create(observer => { 
     let testObject : SwDataObject = { 
     'labels':['value0','value1'], 
     'desktop':[123,456], 
     'mobile':[789,1011] 
     }; 
     observer.next(testObject); 
     observer.complete(); 
    }); 
    } 

내가 잘못 여기서 뭐하는 거지 내가 두 번 연속 같은 테스트 함수 호출에 코드를 단순화했습니다?

감사합니다.

편집 06 월 17 일 : RxJs의 메서드 (flatMap, mergeMap, ...)에서 내 머리를 감싸는 데 좀 더 많은 정보가 추가되었습니다. 주된 이유는 필자가 기능적 측면을 얻지 못했기 때문입니다. 같은 배에있는 사람들이 Charles Scalfani의 these excellent series of articles on functional programming을 한번 보도록 권장합니다.

답변

4

resolve 함수는 observable이 반환 될 것으로 예상합니다. 비동기 결과 만 반환하기 때문에 수행중인 작업이 올바르지 않습니다. 첫 번째 관찰 대상을 호출하고 그 관찰 대상을 구독합니다. 그래서 시간이 지났고 오직 첫 번째 관측치가 해결 된 경우에만 관측 가능한 것을 반환합니다.

Promise.then (종류)와 비슷한 동작을하는 물건에 사용해야하는 것은 flatMap/mergeMap (RxJS5의 별칭)입니다.

이에 코드를 리팩토링 :

@Injectable() 
export class SwResolve implements Resolve<any> { 
    constructor(private swService: SwService) {}  
     resolve (route: ActivatedRouteSnapshot): Observable<MyObject> | Promise<any> | any { 
      return this.swService.getTestData().mergeMap(data => 
       return this.swService.getTestData(); 
      ); 
     } 
} 

는 이것이 할 것 즉시 관측을 반환합니다.

mergeMap은 이벤트를 입력 (이 경우 첫 번째 getTestData() - 호출의 결과)하고 다른 관찰 가능 상태를 반환 할 것을 기대합니다. 후드 아래에서이 관찰 가능을 구독하고 결과를 평평하게합니다.

mergeMap에 대한 기사가 너무 많아서 명확하지 않으면 몇 가지 내용을 읽어 보시기 바랍니다. 여기에 좋은 시작이 있습니다 : https://github.com/btroncone/learn-rxjs/blob/master/operators/transformation/mergemap.md

+0

@KwibtenP 고맙습니다. mergeMap과 flatMap은 어떤 이유로 http 호출 전용이라고 생각했습니다. 코드는 이제 또 다른 오류를 반환합니다 :'TypeError : 속성을 읽을 수 없습니다 'Symbol (Symbol.iterator)'of undefined' – Stanislasdrg

+0

atm 코드를 게시 할 수 있습니까? 나는 mergeMap 내 대답에 return 문을 놓친 것을 참조하십시오. 나는 그것을 업데이트했다 (위의 대답 참조). 그게 도움이된다면 시도해도 될까요? – KwintenP

+0

Thanks KwintenP, 업데이트 된 버전으로 작동합니다! – Stanislasdrg