コンポーネント間でデータを渡す問題

Question

あるコンポーネントから別のコンポーネントへ情報を渡して、そのコンポーネントからの情報をもう一度渡すようにしています。

私はこれを行うための最善の方法を考えています。

私が持つEventEmitterを使用しようとしたが、いくつかの問題に出くわすているように思われている

：

すべてのキープレスに、私はそれがボックス内の現在の値を持つ他のコンポーネントを呼び出したい入力ボックスがあります：

HTML：

<input type="text" #box (keyup)="searchValueChanged(box.value)" class="form-control" placeholder="Search for an Application..."/> 

JS：

@Output() messageEvent = new EventEmitter<string>(); 

searchValueChanged(value:string) { 
    this.messageEvent.emit(value); 
    console.log(value); 
} 

T

HTML：：

<app-menu-top (messageEvent)="receiveMessage(value)"></app-menu-top> 

JS：私がメッセージを受信しようとしています、他のコンポーネントで鶏

receiveMessage(value) { 
    this.message = value; 
    console.log(this.message); 
} 

1. これは私がデータを渡すことするための最良の方法ですか？
2. どのように '値'が未定義（空）のように見えるのですか？

Answer 1

通常、このスタイルを使用してあるコンポーネントから別のコンポーネントにデータを渡します。 1つの解決法は、シングルトンサービスを使用してそれを観察することもできます。

どうundefinedについて - アンギュラドキュメントから$event

<app-menu-top (messageEvent)="receiveMessage($event)"></app-menu-top> 

Answer 2

に変更value、これは働いていたRecipes for common component communication scenarios