角度、独立したコンポーネント間で通信する最善の方法は何ですか？

Question

Angular 4アプリケーションに2つのコンポーネントがあります。たとえば、listComponent & searchComponentは関係がありません。 searchComponentから検索条件を選択している間、listComponentで関数を呼び出す必要があります。 パフォーマンスを考慮してこれを行うための最も効率的な方法はどれですか？

いずれか：

1）I、すなわち、表示コンポーネントを切り替えて共通のサービスからデータを取得し、ルートへの出力イベントを渡し、データサービスを使用して、データの変更を行うことができます。ここでは、毎回ngAfterViewChecked（）またはngOnChange（）を呼び出して、新しいSearchがsearchComponentから選択されたことを知るためのフラグを使用する必要があります。

2）データサービスでrxjs/behavioralSubjectを使用し、searchComponentから設定し、listComponentに登録します。

Answer 1

2つのコンポーネント間に親子接続がある場合は、@ Inputと@Outputを使用する必要があります。

したがって、リストコンポーネントは検索条件を入力とし、検索コンポーネントはアイテムが選択されると出力イベントを出力します。

ngOnChanges（）でリストコンポーネントを更新できます。入力が変更されていない限りリストコンポーネントに通知しない場合は、ChangeDetectionStrategy.OnPushを使用してください。

2番目の方法は、rxjs/behavioralSubjectを別のサービスで使用して、検索コンポーネントから検索条件をプッシュし、リストコンポーネントのそのサブジェクトにサブスクライブする方法です。

さらに多くの検索ロジックがある場合は、Angularでサービスを使用する利点を得ることができ、通知コンポーネントを含むすべての検索ロジックを扱う検索サービスを作成できます。

Answer 2

いくつかの解決策：

1 - サービスを使用します。 2つのコンポーネントに設定したデータを格納するために、少なくともSubjectを含むイベントが必要です。

2 - 親コンポーネントの出力/入力を使用します。

3 - 出力とともにViewChildコンポーネントを使用します。親コンポーネントは出力を受け取ると、ビューの子バインディングを介して子コンポーネント内のmetyhodを呼び出します。

私は通常

そして、受信する必要があるクラスのサービスを注入した後に、メッセージをブロードキャストする必要があるクラスでは、被験者その後

import {Injectable} from '@angular/core'; 
import {Observable, Subject} from "rxjs"; 

/** 
* Event Types 
*/ 
export const MyAppEventTypes = 
    { 
    EventType1: 'EventType1' 
//... 
    }; 
/** 
* Events 
*/ 
export class MyAppEvent 
{ 
    type: string; 
    data: any; 
} 

/** 
* Service in charge of broadcasting messages 
*/ 
@Injectable() 
export class MessageService 
{ 
    /** 
    * Subject to trigger events 
    * @type {Subject<MyAppEvent>} 
    */ 
    private myAppEventSubject: Subject<MyAppEvent> = new Subject<MyAppEvent>(); 

    /** 
    * The observable for events 
    * @type {"../../Observable".Observable<MyAppEvent>} 
    */ 
    public readonly myAppEvent$: Observable<MyAppEvent> = this.myAppEventSubject.asObservable(); 


    /** 
    * Broadcasts a message 
    * @param name 
    * @param data 
    */ 
    broadcast(name: string, data) 
    { 
    this.myAppEventSubject.next(
     { 
     type: name, 
     data: data 
     }); 
    } 
} 

でサービスを利用

Answer 3

メッセージ、サービスを注入した後

this.messageService.myAppEvent$.subscribe(ev => { 
     if (ev.type == MyAppEventTypes.EventType1) 
     { 
     this.data = ev.data; 
     } 
    }); 

Answer 4

私は最高のソリューションはusinだと思うg ngrx。私はこの数回を使用し、理想的にはこのような問題に適合します。