将子项绑定到父项共享模型的正确方法是什么？

Question

我的作品中有一个Angular 2（alpha 26）应用程序。我试图安排合理的组件和子组件，但遇到绑定问题。

我有一个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";

[更新]

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

＆＃13;

＆＃13;

export class ItemEditor{

  appModel: AppModel;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

组件在Angular 2中进行交互有三种基本机制：

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

您可以在此处http://rawgit.com/SekibOmazic/angular2-playground/master/dist/index.html

查看此处实施的示例https://github.com/SekibOmazic/angular2-playground

注射

您可以将子项注入父项并调用回调（您也可以在子项上实现getter和setter函数）。可在此处找到此示例https://github.com/dylanb/Axponents/tree/master/angular2

在此示例中，菜单项将自己的父元素注册，然后父母会在特定事件上调用子项（例如，设置所选项目，或者打开子菜单时设置焦点）。 / p>

服务

要实现此功能，您需要实现一项服务，该服务允许您为模型上的更改注册侦听器。然后，您可以在数据更改时调用侦听器的回调。

活动

我认为这对于Angular 2的三种方法来说是最不具吸引力的，因为你必须掌握孩子的DOM元素才能在孩子身上发射事件。从子项到父项的通信稍微好一点，因为您可以在自己的DOM元素上触发事件并允许它冒泡到父元素。