在组件之间传递数据问题

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);
}

然后在另一个组件中，我试图收到消息：

HTML：

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

JS：

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

1. 这是我传递数据的最佳方式吗？
2. 怎么来＆＃39;重视＆＃39;似乎未定义（空）？

Answer 1

使用此样式将数据从一个组件传递到另一个组件是正常的。一种解决方案也可以是使用单例服务并在其中进行观察。

undefined如何 - 将value更改为$event

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

Answer 2

来自Angular docs，Recipes for common component communication scenarios