角度 - サービスが必要な情報を取得する前にコンポーネントがロードされる

Question

私は現在、オブザーバブルに苦労しています。私はrxjsの主な概念を正しく理解していないと思います。ここに私が達成しようとしていることがあります。

私の角型アプリには/product/:slugというルートがあり、ProductShowComponentになります。必要な情報をすべて表示するには、まず、APIからすべての製品を取得する必要があります（ProductsService）。要は、コンポーネントがロードされた後に商品が取り出される可能性があります（たとえば、ユーザが/product/:slugのページを更新するとき）。

onReadyメソッドをproductsServiceに実装し、ProductShowComponentに登録して、情報がAPIから取得されたら商品を表示してください。 メソッドがproductsService.ready値の変更を監視するObservableを返す場合は、可能性があると思っていましたが、それを行う方法が全くわからないか、まったく考えられません。多分もっと良い方法がありますか？何か案は？

製品-show.component.ts

(...) 

public ngOnInit(): void { 
    this.route.params.subscribe(params => { 
    this.productsService.onReady().subscribe(() => { 
     this.product = this.productsService.get(params['productSlug'], 'slug') 
    }) 
    }) 
} 

(...) 

products.service.ts

(...) 

constructor(
    private appClient: AppClient 
) { 
    this.fetchAll().subscribe((products: Product[]) => { 
    this.products = products 
    this.ready = true 
    }) 
} 

(...) 

public onReady(): Observable<any> { 
    if (!this.ready) { 
    // return an observable that watches for changes of value of this.ready 
    } else { 
    return Observable.of(null) 
    } 
} 

(...) 

Answer 1

あなたは正しい軌道に乗っているが、私は2つの点を追加したいと思います。あなたはどちらか一方であなたの問題を解決することができますが、私は両方が有効だと思います。

サービスは、あなたのサービスは、現在のプロジェクトを保存し、その観測不可能な状態を公開しているあなたの例では観測

を通じて状態を公開する必要があります。だから、例えば、あなたが今、あなたは「ドン...

製品-show.component.ts

public ngOnInit(): void { 
    this.route.params.subscribe(params => { 
    this.productsService.get(params['productSlug']).subscribe(product => 
     this.product = product; 
    }); 
    }); 
} 

products.service.component.ts

constructor(
    private appClient: AppClient 
) { 
    this.products = this.fetchAll().publish(); 
    this.productsSub = this.products.connect(); 
} 

get(productId: string, idType: string) { 
    return this.products.map(products => { 
    return this.getProductFromProducts(products, productId, idType); 
    }); 
} 

を持つことができますあなたはサービスが構築されるとすぐにgetを呼び出すことができるので、本当に準備ができているフラグを気にする必要はありません。

もう1つの利点は、使用可能な製品が変更された場合、コンポーネントが自動的に更新されるということです（サービスが変更された場合は、データが変更されたデータを再取得する必要があります）。用

使用主体ダイナミックアプリケーション状態

今、あなたは本当にレディフラグを必要としないことを前提としています。たとえば、最初のアプリケーションデータ（いくつかのサービスから来る可能性がある）がすべて読み込まれるまで、「データ読み込み」フラグを表示するコンポーネントがいくつかあるとします。しかし、目的のために、私たちはあなたの最初の問題を単なる問題で解決します。あなたのコンポーネントをそのまま残して、サービスを変更することができます...

products.service.component。TS

constructor(
    private appClient: AppClient 
) { 
    this.ready = new BehaviorSubject<boolean>(false); 
    this.fetchAll().subscribe((products: Product[]) => { 
    this.products = products 
    this.ready.next(true); 
    }); 
} 

被験者が観測されているので、あなたはあなただけreadyに直接購読することができonReadyを必要としません。