angular - 将 child 绑定(bind)到 parent 共享的模型的正确方法是什么？

Question

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

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

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

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

我意识到这是最前沿的，非常感谢任何帮助。

我已经尝试将模型作为属性传递，但我可能会尝试它只是不绑定(bind):

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

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

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

[更新]

解决方案是将共享模型注入(inject)到子组件的构造函数中，关键是包括@Parent() 注解:

export class ItemEditor{

  appModel: AppModel;

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

Answer 1

组件在 Angular 2 中交互的三种基 native 制:

1. 事件
2. 服务
3. 注入(inject)剂

您可以在此处查看实现的示例 http://rawgit.com/SekibOmazic/angular2-playground/master/dist/index.html源代码在这里 https://github.com/SekibOmazic/angular2-playground

注入(inject)

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

在这个例子中，菜单项将自己注册到它们的父元素中，然后父元素在某些事件上调用子元素(例如设置所选项目，或者当子菜单打开时，设置焦点)。

服务

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

事件

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