Polymer 将angular 2模型绑定到聚合物下拉列表

我决定这个周末花点时间来看看Angular 2和Polymer。我对angular 2非常感兴趣，并且非常想用它开始构建一些东西。现在开始使用Angular 2的一个缺点是还没有好的组件库。然而，由于Angular 2声称它应该与Web组件一起工作得非常好，所以我想尝试一下聚合物。我已经成功地将数据绑定到简单的组件，如输入字段。目前我所困惑的是如何将模型绑定到纸张下拉菜单的选定对象。因为我对这两个方面都很陌生，我真的不知道怎么做，但这是我迄今为止尝试过的。有没有人成功地将angular 2模型绑定到聚合物下拉列表

<paper-dropdown-menu  >
   <paper-menu class="dropdown-content" valueattr="id" [(ng-model)]="model">
       <paper-item *ng-for="#m of options" id="{{m.id}}" (click)="onClick()">{{m.name}}</paper-item>
   </paper-menu>
</paper-dropdown-menu>

---

我最终通过实现自定义值访问器解决了这个问题，主要是通过查看默认值访问器是如何实现的

我对此有点纠结，因为paper菜单希望将预选值设置为呈现html中的属性。在我的第一次尝试中，我使用angulars internal setProperty来设置所选的值。但是，这设置了DOM属性而不是HTML属性，导致polymer没有创建selected的get、set属性，从而阻止菜单触发下拉菜单侦听的iron select事件。吸取的教训是，记住HTML和DOM之间的区别

import {Directive, ControlValueAccessor, ElementRef, Renderer, NG_VALUE_ACCESSOR, Provider, forwardRef} from "angular2/angular2"
import {CONST_EXPR} from 'angular2/src/facade/lang';

const PAPER_MENU_VALUE_ACCESSOR = CONST_EXPR(new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PaperMenuAccessor), multi: true}));

@Directive({
  selector: 'paper-menu[ng-model]',
  bindings: [PAPER_MENU_VALUE_ACCESSOR]
})
export class PaperMenuAccessor implements ControlValueAccessor {

  onChange = (_) => {};
  onTouched = () => {};

  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {
    this._elementRef.nativeElement.addEventListener('iron-select', (e) => {
      this.onChange(e.target.selected);
    });
  }

  writeValue(value: any): void {
    if(this._elementRef.nativeElement.select) {
      this._elementRef.nativeElement.select(value);
    }
    else {
      this._elementRef.nativeElement.setAttribute("selected", value);
    }   
  }

  registerOnChange(fn: () => any): void { this.onChange = fn; }
  registerOnTouched(fn: () => any): void { this.onTouched = fn; }
}

---

PrimeNG的下拉列表可以隐式绑定到模型。使用

PaperDropdownMenu

和

PaperListbox

的答案类似。我对Angular2相当陌生，我正在努力尝试让它和Polymer 1在同一个应用程序中配合得很好。目前正在使用beta 6。到目前为止，它们似乎合作得很好，至少我发现，完全启用聚合物的阴影dom可以解决一些奇怪的问题。这是一种黑客修复/变通方法吗？我是否应该更深入地研究Angular2的兼容性问题，或者你是否发现它不需要太多的变通方法就能让它们很好地工作？我不确定Angular2和Polymer的最新版本是如何协同工作的，但从你的评论来看，与我尝试时相比，现在听起来可能更好一些。我放弃了让他们一起工作的尝试，因为我不得不做太多的变通。我的希望是能够使用第三方聚合物元素，但当我尝试一些组件时，我发现让它们很好地发挥作用的工作对我来说太大了，所以我回到angular/material，目前正在等待angular 2 material。是的，它越来越好，但还远远不够完美。谢谢

import {Directive, ControlValueAccessor, ElementRef, Renderer, NG_VALUE_ACCESSOR, Provider, forwardRef} from "angular2/angular2"
import {CONST_EXPR} from 'angular2/src/facade/lang';

const PAPER_MENU_VALUE_ACCESSOR = CONST_EXPR(new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => PaperMenuAccessor), multi: true}));

@Directive({
  selector: 'paper-menu[ng-model]',
  bindings: [PAPER_MENU_VALUE_ACCESSOR]
})
export class PaperMenuAccessor implements ControlValueAccessor {

  onChange = (_) => {};
  onTouched = () => {};

  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {
    this._elementRef.nativeElement.addEventListener('iron-select', (e) => {
      this.onChange(e.target.selected);
    });
  }

  writeValue(value: any): void {
    if(this._elementRef.nativeElement.select) {
      this._elementRef.nativeElement.select(value);
    }
    else {
      this._elementRef.nativeElement.setAttribute("selected", value);
    }   
  }

  registerOnChange(fn: () => any): void { this.onChange = fn; }
  registerOnTouched(fn: () => any): void { this.onTouched = fn; }
}