我有一个角2 (alpha 26)应用程序的工作。我试着把它们分成合理的组件和子组件,但是绑定有问题。
我有一个Singleton模型(让我们称之为AppModel),我正在成功地将它从subcomponent注入到我的第一个子组件(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;
}
}
发布于 2015-06-07 08:00:22
构件在角度2中相互作用有三种基本机制:
您可以看到这里用源代码实现的示例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
在本例中,菜单项使用其父元素注册,然后父母亲在某些事件上调用子项目(例如设置选定的项,或打开子菜单时设置焦点)。
服务
要实现这一点,您需要实现一个服务,该服务允许您为模型上的更改注册侦听器。然后,当数据发生变化时,您可以为侦听器调用回调。
事件
我认为这是角2的三种方法中最不吸引人的,因为您必须掌握子元素的DOM元素,才能激发子元素的事件。它对从子元素到父元素的通信稍微好一些,因为您可以在自己的DOM元素上触发事件,并允许它冒泡到父元素。
https://stackoverflow.com/questions/30691181
复制