2016-05-22 7 views
0

この問題は、新しいRCルータと廃止予定のルータの両方で、以前から議論されていると思います。優遇されたソリューションは、ルータ出口でアクティブ化されたコンポーネントにデータを渡すためのサービスを使用しているようでした。Angular2 RC1:コンポーネントにデータを渡す

しかし、私はそれについてもっと考えてみれば、より多くの人は、共感、観察可能なもの、イベント・イテスタの地獄の中にいます。 、ID 4とモータ用のスパークコイルのためのデータを取得:

ルートは、このように呼ばれている:「/車/ 123 /モーター/ 4/sparkcoil」を意味

次のシナリオを検討してください。これはID 123を持つ車の一部です。

したがって、 "car"コンポーネント、 "motor"コンポーネント、 "spark coil"コンポーネントの3つのコンポーネントがネストされています。最初のコンポーネントには、子コンポーネントがレンダリングされるルータ出口があります。それほど難しいことではありません。

のは、いくつかの仮定してみましょう:私は車のデータへのアクセスを必要とする「モーター」のコンポーネントで

1) を、そして「スパークコイル」コンポーネントに、私は車のデータの両方にアクセスする必要がありますおよびモータデータを含む。

2)車を取得するためのバックエンド呼び出しには、膨大なデータ量のため、使用可能なすべてのモータータイプに関するデータが含まれていません。したがって、車、モーター、およびスパークコイルのデータは、別々のバックエンドコールでフェッチする必要があります。

起動される最初のコンポーネントは、ルート "/ car/123"のカーコンポーネントです。サービスが注入され、バックエンド呼び出しを行い、コンポーネントが加入するObservableを返します。

次に、2番目のルート "/ motor/4"が有効になります。親コンポーネントによってフェッチされたcarオブジェクトについて知る必要があります。その後、 "/ sparkcoil"コンポーネントが起動され、モーターとクルマについても知っておく必要があります。明らかに@Inputデコレータを渡す方法はありません。頻繁に推奨されるのは、サービスを使用することです。さて、サービスXを車とモーターコンポーネントの両方に注入します。痛みが来る。私は、イベント・イミターやオブザーバブルの同時地獄で自分自身を見つけ出すことなく、サービスを設計するための満足のいく解決策はありません。

アイデア1:

車及びモータコンポーネントの呼び出し次に、motorFetchedEventEmitterとcarFetchedEventEmitterのnext()メソッドをトリガし、fetchMotor(ID)とfetchCar(ID)という名前のサービスに機能します。モーターとスパークコイルコンポーネントはEventEmitterのすべてに加入し、バックエンドデータがいつ取り込まれたかを知らせます。コンポーネントは、彼らが火後か前持つEventEmitter に加入している場合しかし、私は知りません。以前は、すべてが問題ありません。後になったら、私はemittalsを "再生"する必要があります(Observable.replay(...)を参照)。 Observablesを再生すると、サービスとそのEventEmitterが一度だけインスタンス化されるため、(無関係の)イベントが多く発生する可能性があります。

アイデア2:

私はそれ以外の方法でやります。自動車およびモーターコンポーネントは、スパークコイルコンポーネントが呼び出されるまでアイドリングのままです。このコンポーネントはすべてのルートセグメントを解決し、それぞれのバックエンドコールを実行し、サービスのEventEmittersを介してバックエンド応答を "car"コンポーネントと "motor"コンポーネントに伝播します。私はこのアプローチがRC1の新しいコンポーネントのルーティングに関しては非常に非生産的であることを認めます。

ライフサイクルフックを考慮して、このシナリオではおそらくより良い解決策があります。ドキュメントによると、OnActivateインターフェイス(https://angular.io/docs/js/latest/api/router/OnActivate-interface.htmlを参照) によれば、onActivateが約束を返すとき、約束が解決されるまで、すべての子コンポーネントはアクティブ化されません。私はルーティングされたコンポーネントのための同様の機能があるとは思わない。

これをできるだけエレガントに解決する方法はありますか?

事前にお寄せいただきありがとうございます。私はコーヒーを買う必要がある! : - ?

答えて

0

サービスではEventEmitterを使用しないでください。これはかなりの間、一般的なプラクティスでしたが、EventEmitterはコンポーネントの@Output()にのみ使用してください。

私は全体の問題は、オブザーバブルとサービスをどのように使用するかについての設計上の問題に過ぎないと思います(私は解決するのは簡単な問題ではありません)。

BehaviorServiceを使用すると、の後に観測点のサービスがサブスクライブされるタイミングの問題を解決するオプションになる可能性があります。 BehaviorServiceを使用すると、新しいサブスクライバは直ちに最後に送信された値を受け取ります。

あなたの質問には、より詳細な提案のための十分な情報が含まれておらず、とにかくStackOverflowでは広すぎるようです。あなたの問題を単一の問題に分解し、これらに対して新しい質問を作成することができれば、それを修正する方法について具体的な提案をする方が簡単かもしれません。

+0

こんにちはギュンター、 これは確かに設計上の問題ではなく、技術的な問題です。私はReduxと州を管理するアプローチがどこからも出てこなかったと思います。あなたが言ったように、BehaviorSubject(BehaviorServiceではないことを意味していると思います)は、私のシナリオではおそらく許容できる解決策です。 Angular2とその州に関するこの興味深い記事からあまり遠すぎるものではありません:https://medium.com/front-end-developers/managing-state-in-angular-2-using-rxjs-b849d6bbd5a5#.hnep5xalp reducexの方向データフローの原理。 – Matt

+0

Ops right、 'BehaviorSubject' –

関連する問題