Angular 2 appのアーキテクチャーフロー

Question

私はAngular2アプリケーションを開発中です。私のアプリケーションは、新しい投稿を作成するか、すでに作成された投稿を編集するために使用されます。それは2ページある。

最初のページはすべての基本情報を持つ通常のフォームであり、2ページ目は互いに話す複数のコンポーネントを持っています。つまり、各コンポーネントは相互にリンクしており、互いに話し合いが必要です。これらのコンポーネントはタイプによって動的です。

私の質問は次のとおりです。シナリオの作成と編集の両方に適合するようにアプリケーションのフローを設計する方法を教えてください。

私は今を考えています道がある、

各コンポーネントは、データを保持するサービスを（注射用それらを作る）持って、私はすべてのこれらのサービスのためのオブザーバーを作成し、他のコンポーネントのものに加入しなければなりません彼らは奉仕の変化に応じて行動するでしょう。

他の方法がある：

私はオブジェクトを発し、私はそのコンポーネントを呼び出し、他のコンポーネントがを聞くイベントを発することができる戻ります共通エミッタサービスを作成しました。

どのような方法でこのようなシナリオを処理し、長期的には役に立ちますか？また、後ほどいくつかのコンポーネントをシームレスに追加できるように助けてください。私はあなたが2ページ目のngOnInit方法で必要な「モデル」オブジェクトを作成し、それらを必要とする部品への入力として渡すために検討する

おかげ

Answer 1

。

これは、このような 'モデル'オブジェクトを受け取るためにコンポーネントが@Input（）プロパティを定義することを必要とします。

が、私はこれは私が次の戦略検討するANUTEJA

OF COMMENTに応じて

を役に立てば幸い：

1）Child1は、出力プロパティを定義する（のが）@Output() resultOutputを言わせ、それを通して新しい結果がバックエンドコールから取得されたという事実、つまりthis.resultOutput.emit(resultOfBackendCall)ようなものParent成分はChild1のresultOutput性に加入し、したがって、新しい結果が<child1 (resultOutput)="newResult($event)"></child1>ようなものを介して、フェッチされるときに知っている）

2（resultOfBackendCallデータを取得Child1方法で定義された変数であると仮定して）

3）結果は、（のは、変数resultReceivedを呼びましょう）ParentのプロパティにChild1から

のようなものを受けParent店のnewResult(event)方法

newResult(resultFromBackEnd) { 
    this.resultReceived = resultFromBackEnd; 
} 

4）Child2（）は、それが

5を表示する必要Parentリストから受信することを期待している）のが@Input() myListを言わせParentが<child2 [myList]="resultReceived"></child2>

のようなものを経由してプロパティresultReceivedを使用してChild2を供給し、入力プロパティを定義し

ParentがChild1から新しいバックエンドコールからの通知を受け取るとすぐに、それはChild2をフィードし、結果は表示されます。

基本的には、Parentはすべての通知を集中管理し、アプリケーションのルールに従ってその子にデータをディスパッチします。このように、私の意見では、Parentで明確なデザインを得て、この特定のアプリケーションで何が起こるかを調整します。

これは十分明確であり、助けてくれるといいと思います。