Я решил занять некоторое время в эти выходные, чтобы посмотреть на Angular 2 и Polymer. Я действительно заинтересован в angular 2 и очень хотел бы начать что-то строить с ним. Недостатком начала работы с Angular 2 является то, что пока нет хорошей библиотеки компонентов. Однако, поскольку Angular 2 утверждает, что он должен так хорошо работать вместе с веб-компонентами, я решил попробовать Polymer. Мне удалось связать данные с простыми компонентами, такими как поле ввода. На данный момент я застрял в том, как привязать модель к выбранному объекту в раскрывающемся меню бумаги. Поскольку я очень новичок в обоих, я не знаю, как это сделать, но это то, что я пробовал до сих пор. Кто-нибудь достиг, чтобы связать угловую модель 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>

РЕДАКТИРОВАТЬ: я теперь создал ValueAccessor, который, кажется, работает приемлемо с одним исключением. Я пытаюсь получить в раскрывающемся списке предварительно выбранное значение, установив выбранный атрибут в методе writeValue. Сначала это работало, но после внесения изменений я уже не могу изменить выбранное значение. Это работает, если я жестко закодировал значение в шаблоне, так что, похоже, что-то связано с угловым вместе с полимером. Я попытался следовать трассировке стека и сравнить разницу между ними. Когда я жестко кодирую значение, выполняется метод установки для выбранного, который запускает событие выбора элемента. Когда я следую той же трассировке, когда устанавливаю свойство в valueAccessor, метод установки больше не выполняется. Кажется, есть проблема с взаимодействием между угловым 2 и полимером.

import {Directive, ControlValueAccessor, ElementRef, Renderer, NG_VALUE_ACCESSOR, Provider, forwardRef} from "angular2/angular2"
import {isBlank, CONST_EXPR} from 'angular2/src/facade/lang';
import {setProperty} from "angular2/src/common/forms/directives/shared"

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

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

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

  constructor(private _renderer: Renderer, private _elementRef: ElementRef) {
    var self = this;
    this._elementRef.nativeElement.addEventListener('iron-select', function(e, v, s){
      console.log(e.target.selected);
      self.onChange(e.target.selected);
    });
  }

  writeValue(value: any): void {
    if(value){
      if(this._elementRef.nativeElement.select) {
        this._elementRef.nativeElement.select(value);
      }
      else {
        //this._elementRef.nativeElement.attributes["selected"]
        setProperty(this._renderer, this._elementRef, 'selected', value);
      }
    }       
  }

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