この問題は、新しい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が約束を返すとき、約束が解決されるまで、すべての子コンポーネントはアクティブ化されません。私はルーティングされたコンポーネントのための同様の機能があるとは思わない。
これをできるだけエレガントに解決する方法はありますか?
事前にお寄せいただきありがとうございます。私はコーヒーを買う必要がある! : - ?
こんにちはギュンター、 これは確かに設計上の問題ではなく、技術的な問題です。私はReduxと州を管理するアプローチがどこからも出てこなかったと思います。あなたが言ったように、BehaviorSubject(BehaviorServiceではないことを意味していると思います)は、私のシナリオではおそらく許容できる解決策です。 Angular2とその州に関するこの興味深い記事からあまり遠すぎるものではありません:https://medium.com/front-end-developers/managing-state-in-angular-2-using-rxjs-b849d6bbd5a5#.hnep5xalp reducexの方向データフローの原理。 – Matt
Ops right、 'BehaviorSubject' –