将 child 绑定到 parent 共享的模型的正确方法是什么？

What is the correct way to bind child to model shared by parent?

我有一个 Angular 2 (alpha 26) 应用程序正在开发中。我正在尝试安排合理的组件和 sub-components 但在绑定时遇到问题。

我有一个 Singleton 模型（我们称它为 AppModel），我将其从我的 App 组件成功注入到我的第一个子组件 (ItemBrowser) 的构造函数中。

我希望他们的子组件 (ItemEditor) 能够看到并反映对 AppModel.selectedItem 的更改。这可以是 App 或 ItemBrowser 的子组件。

目前我尝试什么都没有关系，对 AppModel.selectedItem 的更改仅显示在 ItemBrowser 中（当前正在对 AppModel.selectedItem 进行更改）。似乎模型更改没有传播到子组件，我不知道如何强制进行刷新。

我知道这是最前沿的，非常感谢任何帮助。

我试过将模型作为 属性 传递，但我可能会尝试它只是不绑定：

<item-browser [selectedItem]="AppModel.selectedItem"></item-browser>

也许我只是缺少导入。到目前为止是：

import {Component, bootstrap, View, NgFor, NgIf, DEFAULT, Injector, LifecycleEvent, onChange,  EventEmitter } from "angular2/angular2";

[更新]

解决方案是将共享模型注入 child 组件的构造函数，关键是包括 @Parent() 注释：

export class ItemEditor{

  appModel: AppModel;

  constructor(@Parent() appModel: AppModel) {
    this.appModel = appModel;
  }
}

Angular2中组件交互的基本机制有3种：

  1. 活动
  2. 服务
  3. 注射

您可以在此处查看实施的示例http://rawgit.com/SekibOmazic/angular2-playground/master/dist/index.html with the source code here https://github.com/SekibOmazic/angular2-playground

注射

您可以将 children 注入 parent 并调用回调（您还可以在 children 上实现 getter 和 setter 函数).可以在此处找到这方面的示例 https://github.com/dylanb/Axponents/tree/master/angular2

在此示例中，菜单项使用其 parent 元素注册自己，然后 parent 会在某些事件上调用 children（例如设置所选项目，或者当 sub-menu 打开时，设置焦点）。

服务

要实现这一点，您需要实现一项服务，该服务允许您为模型的更改注册侦听器。然后你可以在数据变化时调用监听器的回调。

活动

我认为这是 Angular 2 的三种方法中最没有吸引力的，因为您必须掌握 child 的 DOM 元素才能触发事件child仁。从 child 到 parent 的通信稍微好一些，因为您可以在自己的 DOM 元素上触发事件并允许它冒泡到 parent。