2017-05-13 20 views
2

こんにちは、私はアングル2で新しいです。私は次のような状況で立ち往生しています。私は私のホームページにulを持っています。私は仕事の説明についてfirebase API呼び出しを行うと、配列に格納していますと、ジョブ配列を言うことができますし、私は、UI iの李のいずれかをクリックすると道角度2のあるコンポーネントから別のコンポーネントへデータを渡す(親から子へ、または子から親へ)?

<ul *ngFor = "let job of jobs " class="job-list" routerLink="jobdetails" > 
    <div class="row"> 
     <div class="col-md-3"> 
     <li>{{job.nameOfThePost}}</li> 
     </div> 
     <div class="col-md-3"> 
     <li>{{job.lastDateOfApplication}}</li> 
     </div> 
     <div class="col-md-3"> 
     <li>{{job.noOfJob}}</li> 
     </div> 
     <div class="col-md-3"> 
     <li>{{job.educationalQualification}}</li> 
     </div> 
    </div> 
    </ul> 

を次のようにホームページのデータを示しています新しいコンポーネントにユーザーを連れて、jobdetailsコンポーネントと言うことができます。 私の問題は、配列をjobdetailsコンポーネントに渡したいということです。 jobdetailsコンポーネントはホームページコンポーネントの子コンポーネントではないため、どのようにホームページコンポーネントからjobdetailsコンポーネントにデータを渡すことができます。私が見つけたすべての助けは、子供から親または親にデータを渡す方法でした。これどうやってするの?

+1

シェアードサービス:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service :) – Alex

+1

パラメータを使用してナビゲートします。https://角度.io/docs/ts/latest/guide/router.html#!#ルートパラメータ – echonax

答えて

0

目標を達成する方法はいくつかあります。すべてには何らかの種類の共有クラスが含まれます。 @ AJT_82は既に提案しているように、共有サービスはAngularを初めて使う人には最も一般的な方法でしょう。

もう1つの方法は、NgRXを使用して、状態情報をNgRXテーブルにプッシュすることです。

データが古くならないようにまた、単にIDを渡し、あなたがそれを取得する場合、データベースから情報を読み込む検討する必要があります

2

、いずれかの成分の一つからの情報を共有するサービスのために行きます別のものには、小規模のアプリケーションの場合は推奨された方法です。複数のイベントエミッタを入れ子にするのは、データを処理するための良い方法ではありません。

他の方法はReduxアプローチです。中規模から大規模のアプリケーションに適しています。これはStore and Reducersのコンセプトであり、すべてのデータは1か所で処理されます。これは、複数のコンポーネント間でデータを同期させる必要がある場合に最適です。

take a look for further info

関連する問題