Ember 与无关组件的路由通信答案

【问题标题】：Ember route communication with unrelated componentEmber 与无关组件的路由通信
【发布时间】：2016-11-18 22:06:21
【问题描述】：

我知道 EmberJS 提倡“数据下降，行动上升”，但我有一个场景，我不确定如何适应该范式。最好用一个与我想要达到的目标类似的例子来解释。

假设我有一个固定的标头组件 ('fixed-header')。我希望这个标题总是出现，所以我当然将它添加到我的主应用程序模板中：

{{fixed-header}}
{{outlet}}

现在假设我希望我的标题显示一些关于我所在路线的信息。为简单起见，假设每条路线都有一个我想在固定标题中显示的标题。所以无论我在/foo 或/foo/bar/baz 或/wackawacka/meh?cat=meow 上，我都希望该路由能够将一些数据发送到fixed-header 组件以进行显示。换句话说，我有点想反对“数据下降”并做一个“数据上升”。

解决这个问题的理想方法是什么？我的第一个直觉是创建一个my-header 监听的服务，并且路由可以发布他们的信息。但这是正确的做法吗？创建一个服务只是为了发送一点文本对我来说似乎很奇怪。还有其他方法吗？

【问题讨论】：

老实说，我认为服务非常适合。实际上，我们希望有一天我们会为此提供路由服务。
好吧，我只是觉得为这个功能提供服务有点过头了。

标签： ember.js ember-router ember-components

【解决方案1】：

你可以为你的组件使用一个参数。

{{fixed-header info=headerInfo}}
{{outlet}}

然后在某个钩子中的任何路线中

setupController: function(controller, model) {
  this._super(controller, model);
  var headerInfo = ...
  this.controllerFor('application').set('headerInfo', headerInfo);
}

【讨论】：

我其实很喜欢这个解决方案。我对使用服务犹豫不决，因为我只需要向组件发送一个小文本字符串，而服务似乎有点矫枉过正。如果我决定需要发送更多数据，我仍然可能会使用服务，但目前，您的解决方案非常有效。

【解决方案2】：

服务才是王道。参考Service Ember Guide

Ember.Service 是一个在应用程序期间存在的 Ember 对象，并且可以在应用程序的不同部分中使用。服务对于需要共享状态或持久连接的功能很有用。

【讨论】：