2

我正在尝试使用 Angular 2 beta 并希望将 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 不再需要这些东西来使更改可见？

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

提前致谢！！

4

2 回答 2

3

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

EventEmitter当您choice更改<child>. 然后，任何父组件都可以使用事件绑定语法以声明方式订阅该事件<child (selectedChange)="doSth()">

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

于 2016-01-18T16:06:00.610 回答
3

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

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

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

于 2016-01-16T16:50:26.303 回答