Angular 2组件与对象的双向数据绑定

Question

我正在试验 Angular 2 测试版，并希望将 Semantic UI Dropdown 控件用作 Angular 2 组件。

http://semantic-ui.com/modules/dropdown.html#converting-form-elements

我的小示例项目在这里：

https://github.com/uNki23/angular2semantic/

我已将它封装在 Angular 2 组件“UiSelectComponent”中，如您在此处看到的：

https://github.com/uNki23/angular2semantic/blob/master/src/app/components/ui-select.component.ts

任何其他组件都应该通过向它传递两个对象来使用 UiSelectComponent：一个包含可能选项的数组和一个可选的预定义选定选项。我为选项“SelectOption”创建了一个界面，它有两个属性“value”（数字）和“displayValue”（字符串）。组件应该这样使用：

https://github.com/uNki23/angular2semantic/blob/master/src/app/components/app.component.html

第一个问题： 我想要实现的是，将预先选择的选项传递给 UiSelectComponent，用户选择会更改该选项并且该选项也应该更改父组件中的选定对象。显然父组件需要知道，从 UiSelectComponent 中选择的选项是什么，对吧？

第二个问题： 如果我将 .dropdown() 函数包装在 setTimeout() 函数中，则在语义 ui 下拉列表中设置初始选定选项才有效。我想，Angular 2 不再需要这些东西来使更改可见？

过去两天我已经尝试了所有可能的方法 - 现在我需要你的帮助 :)

提前致谢！！

Answer 1

第一个问题：当您更改子项中的某些内容时，您可以使用输出 (EventEmitter) 属性并向父项发出事件。您的父模板需要监听此事件：<child (someChildEvent)="myCallback()" ...>。

但是，如果您要共享的选项数据位于您传递给子对象的对象内部 - <child [someChildProperty]="sharedObj" ...>，则父子对象都引用相同/一个 sharedObj，因此任何更改您在子代中所做的在父代中可见。 EventEmitter 可能是一个更好的选择，因为这样您就可以在发生更改时通知父级......但事件实际上不必传递任何值，因为父级已经可以看到对 @987654326 所做的任何更改@。

第二个问题：我没有看你的代码，但你可能需要超时，因为你可能需要等待你的 3rd-party 组件渲染或完成初始化。

Answer 2

由于 Angular 2 中不再有这种特定意义上的双向数据绑定，因此您始终必须明确地传播更改。

当您的choice 更改为<child> 时，您将使用EventEmitter 发出一个事件。然后，任何父组件都可以使用事件绑定语法<child (selectedChange)="doSth()">

以声明方式订阅该事件

这是一个有效的 plunk：http://plnkr.co/edit/2SsgStP3P4DNgXEES8c8?p=preview