可以使用 ngControl 绑定 Polymer 纸张下拉菜单吗？答案

【问题标题】：Can the Polymer paper-dropdown-menu be bound using ngControl?可以使用 ngControl 绑定 Polymer 纸张下拉菜单吗？
【发布时间】：2016-09-15 17:19:33
【问题描述】：

我正在尝试使用 Polymer paper-dropdown-menu 控件在 Angular2 中创建一个表单。有没有办法将下拉列表的选定值绑定到我的组件中的控件？我已经尝试了一切，但没有运气。有人克服了这个障碍吗？

paper-input 的工作示例是：

模板：

<paper-input type="password"
             ngControl="password"
             ngDefaultControl>
</paper-input>

组件：

constructor(private fb:FormBuilder) {

    this.loginForm = fb.group({
        password: new Control("")
    });
}

paper-dropdown-menu 有类似的东西吗？绑定到值或文本本身都可以。谢谢！

【问题讨论】：

标签： forms data-binding typescript angular polymer

【解决方案1】：

您需要一个自定义的ControlValueAccessor。我没有成功将ControlValueAccessor 用于paper-dropdown-menu 本身，但用于paper-dropdown-menu 内的paper-menu 或paper-listbox 之类的

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


@Directive({
  selector: 'paper-listbox',
  host: {'(iron-activate)': 'onChange($event.detail.selected)'},
  providers: [PAPER_MENU_VALUE_ACCESSOR]

})  
export class PaperMenuControlValueAccessor implements ControlValueAccessor {
  onChange = (_:any) => {
  };
  onTouched = () => {
  };

  constructor(private _renderer:Renderer, private _elementRef:ElementRef) {
    console.log('PaperMenuControlValueAccessor');
  }

  writeValue(value:any):void {
    //console.log('writeValue', value);
    this._renderer.setElementProperty(this._elementRef.nativeElement, 'selected', value);
  }

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

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

另见

【讨论】：