角4：等しい階層の2つのコンポーネント間でパブリックメソッドを呼び出す

Question

私のアプリケーションでは2つのコンポーネントが呼び出されています。私はここでオンラインで検索し、親子関係を持つコンポーネントに関する決定的な例しか見つけられませんでした。

app.component.htmlは次のように

<component1></component1> 
<div class="container"> 
    <component2></component2> 
</div> 

マイ（消毒）コンポーネント1は、サービスから取得し、コンポーネント2の範囲内の変数の一握りを設定コンポーネント2の関数を呼び出す関数を使用

//COMPONENT2 
public GetLatest(): Subscription{ 
    console.log("GetLatest Called"); 
    return this._component2Service.GetLatestFromService() 
    .subscribe(outputData => this.outputData = outputData, error => this.errorMessage = <any>error) 
} 

：、成分2に呼び出される関数として、以下のコンポーネント2のHTML

//COMPONENT 1 
private handler: component2Component; 
ExecuteFunction(){ 
    console.log("Called"); 
    this.handler.GetLatest(); 
} 

のデータバインディングに関連付けられていること

ただし、次のエラーが表示されます。ExecuteFunction（）を実行するcomponent1ボタンの場所に未定義のGetLatestプロパティを読み取ることができません。

まずComponent2のインスタンスをインスタンス化する必要がありますか？残念なことに、私は重いデータ衛生上の要求を受けています。

component1内のボタンからcomponent2 GetLatest（）メソッドを呼び出す方法を知りたいと思います。ありがとう！

Answer 1

コンポーネントの目的は、コンポーネントに関連付けられたビューに必要なプロパティとメソッドを提供することだけです。したがって、コンポーネントは、別のコンポーネントのメソッドを呼び出す必要はありません。

コンポーネント間でデータをやり取りする必要があるかもしれません。ルートパラメータ、ルートリゾルバ、または親/子コンポーネント（@Inputおよび@Output）で定義された手法を使用してコンポーネントを実行できます。

より一般的な機能や共有機能がある場合は、そのコードをサービスに含める必要があります。次に、いずれかのコンポーネントがサービスのメソッドにアクセスできます。

これを解決するための1つのオプションは、リポジトリパターンを使用することです。データを取得して公開することを目的とするサービスを構築します。このはとなります。または、データサービスからデータを取得し、どちらかのコンポーネントで使用できるように公開する2番目のサービスを構築することもできます。

これらのコンポーネントが実際にapp.componentのテンプレートに含まれていない場合にも有効な別のオプションは、ルートリゾルバを使用することです。これにより、これら2つのコンポーネントを含むテンプレートを表示するルートに移動する前に、データを取得できます。両方のコンポーネントは、ルートリゾルバによって取得されたデータにアクセスできます。

私はここでルートリゾルバの例があります。https://github.com/DeborahK/MovieHunter-routing