将孩子绑定到父母共享的模型的正确方法是什么？答案

【问题标题】：What is the correct way to bind child to model shared by parent?将孩子绑定到父母共享的模型的正确方法是什么？
【发布时间】：2015-06-08 13:39:26
【问题描述】：

我正在开发一个 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()注解：

export class ItemEditor{

  appModel: AppModel;

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

【问题讨论】：

【解决方案1】：

Angular 2 中组件交互的三种基本机制：

注入

您可以将子代注入父代并调用回调（您也可以在子代上实现 getter 和 setter 函数）。这方面的一个例子可以在这里找到https://github.com/dylanb/Axponents/tree/master/angular2

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

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

我认为这是 Angular 2 的三种方法中最不吸引人的一种，因为您必须获取子元素的 DOM 元素才能触发子元素的事件。从子节点到父节点的通信稍微好一些，因为您可以在自己的 DOM 元素上触发事件并让它冒泡到父节点。

【讨论】：