如何订阅 Polymer paper-dropdown-menu 值更改事件？（角2）答案

【问题标题】：How to subscribe to Polymer paper-dropdown-menu value change event? (Angular2)如何订阅 Polymer paper-dropdown-menu 值更改事件？（角2）
【发布时间】：2016-06-28 19:01:00
【问题描述】：

paper-input 组件有一个“changed”事件，您可以使用它来实现 2 向绑定。我正在寻找paper-dropdown-menu 的等价物。 paper-dropdown-menu api 提供“value”属性作为 getter，但不作为事件。

这是标准的纸质下拉菜单声明：

<paper-dropdown-menu label="Your favourite pastry">
  <paper-listbox class="dropdown-content">
    <paper-item>Croissant</paper-item>
    <paper-item>Donut</paper-item>
    <paper-item>Financier</paper-item>
    <paper-item>Madeleine</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

paper-listbox 有一个与描述的事件类似的事件（“iron-select”），但事件数据不会告诉您它是哪个 paper-dropdown-menu 的子级。

到目前为止，我能够完成数据绑定的最佳方式是监听所有纸质列表框“iron-select”事件，然后每次都获取所有下拉列表的值。

在 Angular2 中：

/* template */

<paper-dropdown-menu #dropdown1 label="Your favourite pastry">
  <paper-listbox (iron-select)="onSelectDropdown($event)" class="dropdown-content">
    <paper-item>Croissant</paper-item>
    <paper-item>Donut</paper-item>
    <paper-item>Financier</paper-item>
    <paper-item>Madeleine</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

//and another 2...

/* class */

@ViewChild('dropdown1') dropdown1:any;
@ViewChild('dropdown2') dropdown2:any;
@ViewChild('dropdown3') dropdown3:any;

onSelectDropdown(event:any){
  setTimeout(()=>{
    this.data = {
     thing1: this.dropdown1.nativeElement.value;
     thing2: this.dropdown2.nativeElement.value;
     thing3: this.dropdown3.nativeElement.value;
    }
  }, 0);
}

这似乎不是一种非常优雅的方法，特别是因为我必须在超时中包装 getter（“值”）调用。这是因为事件在传播到父级（paper-dropdown-menu）之前触发。

【问题讨论】：

标签： angular polymer

【解决方案1】：

可绑定的更改事件会很好，但这些可能是对当前方法的适度改进：

您可以直接从列表框事件中获取值而不是超时（如果需要，这也支持多选）：

onSelectDropdown(event:any){
    console.log("selected item(s)", event.target.selectedItems);
}

要确定它来自哪个列表，您可以为下拉菜单提供不同的处理程序，或者为处理程序手动指定它：

<paper-dropdown-menu #dropdown1 label="Your favourite pastry">
    <paper-listbox (iron-select)="onSelectDropdown($event,'dropdown1')" class="dropdown-content">
...
<paper-dropdown-menu #dropdown2 label="Your favourite cheese">
    <paper-listbox (iron-select)="onSelectDropdown($event,'dropdown2')" class="dropdown-content">

【讨论】：