绑定角2型聚合物下拉 [英] Bind angular 2 model to polymer dropdown
问题描述
我决定花一些时间本周末看角2与聚合物。我在2角真正感兴趣并且真的想开始建设有它的东西。与角2起一个缺点，现在是，有没有好的组件库呢。然而，由于角2声称，它应该工作这么好与Web组件一起我想过放弃聚合物一试。我已经成功地将数据绑定到简单的组件等的输入域。什么我卡在了那一刻是怎样的模式绑定到纸张下拉菜单中选定的对象。因为我很新到这两个我真的不知道该怎么做，但这是我到目前为止已经试过。有没有人完成，以角2模型绑定到聚合物下拉列表？
＆LT;纸下拉菜单＆GT;
＆LT;造纸菜单类=下拉列表内容valueattr =ID[（NG-模式）] =模式＆GT;
＆LT;造纸项目* NG-用于=选项＃MID ={{m.id}}（点击）=的onClick（）＆GT; {{m.name}}＆LT; /造纸项目＆GT;
＆LT; /纸菜单＆gt;
＆LT; /纸下拉菜单＆GT;
编辑：现在我已经创建了一个ValueAccessor这似乎是可以接受的工作，有一个例外。我试图通过设置writeValue方法所选属性来获得的下拉菜单，有pre-选择的值。起初，这似乎工作，但之后我做了这个变化，我可以不再更改选定的值。所以，看起来好像是用角与聚合物一起做它工作在模板中，如果我硬code中的价值。我试图按照堆栈跟踪和比较的区别两者之间的。当我辛苦code执行所选setter方法的值触发项目-select事件。当我按照相同的跟踪，当我在valueAccessor设置属性也不再执行setter方法。似乎是具有角2和聚合物之间的相互作用的问题。
进口{指令，ControlValueAccessor，ElementRef，渲染，NG_VALUE_ACCESSOR，供应商，forwardRef}从angular2 / angular2
进口的isBlank {，CONST_EXPR}从'angular2 / src目录/门面/郎;
从进口{}的setPropertyangular2 / src目录/通用/表格/指令/共享常量PAPER_DROPDOWN_VALUE_ACCESSOR = CONST_EXPR（新供应商（
NG_VALUE_ACCESSOR，{useExisting：forwardRef（（）=＆GT; PaperDrowpdownMenuAccessor），多：真}））;@指示（{
选择：纸张菜单[NG模型]'，
绑定：[PAPER_DROPDOWN_VALUE_ACCESSOR]
}）
出口类PaperDrowpdownMenuAccessor实现ControlValueAccessor { 的onChange =（_）=＆GT; {};
onTouched =（）=＆GT; {}; 构造函数（私人_renderer：渲染器，私人_elementRef：ElementRef）{
VAR自我=这一点;
this._elementRef.nativeElement.addEventListener（'铁选'，函数（E，V，S）{
的console.log（e.target.selected）;
self.onChange（e.target.selected）;
}）;
} writeValue（价值：任意）：无效{
如果（值）{
如果（this._elementRef.nativeElement.select）{
this._elementRef.nativeElement.select（值）;
}
其他{
//this._elementRef.nativeElement.attributes[\"selected]
的setProperty（this._renderer，this._elementRef，'选择'，值）;
}
}
} registerOnChange（FN：（）=＆GT;的）：无效{
this.onChange = FN;
}
registerOnTouched（FN：（）=＆GT;的）：无效{this.onTouched = FN; }
}
我终于解决了这个由我自己通过实现自定义值访问，主要是通过查看默认值accesssor如何implmented。 <一href=\"https://github.com/angular/angular/blob/2.0.0-alpha.46/modules/angular2/src/common/forms/directives/default_value_accessor.ts\" rel=\"nofollow\">https://github.com/angular/angular/blob/2.0.0-alpha.46/modules/angular2/src/common/forms/directives/default_value_accessor.ts
我挣扎了一下这个，因为纸质菜单希望pre-选择的值被设置为在渲染HTML属性。在我第一次尝试我用angulars内部的setProperty设置所选值。不过，这台DOM属性，而不是HTML属性，致使该聚合物没有创造一个get，选定设置财产prevented触发铁选事件，在下拉菜单监听菜单。教训，记住HTML和DOM之间的区别。
进口{指令，ControlValueAccessor，ElementRef，渲染，NG_VALUE_ACCESSOR，供应商，forwardRef}从angular2 / angular2
进口{} CONST_EXPR从'angular2 / src目录/门面/郎;常量PAPER_MENU_VALUE_ACCESSOR = CONST_EXPR（新供应商（
NG_VALUE_ACCESSOR，{useExisting：forwardRef（（）=＆GT; PaperMenuAccessor），多：真}））;@指示（{
选择：纸张菜单[NG模型]'，
绑定：[PAPER_MENU_VALUE_ACCESSOR]
}）
出口类PaperMenuAccessor实现ControlValueAccessor { 的onChange =（_）=＆GT; {};
onTouched =（）=＆GT; {}; 构造函数（私人_renderer：渲染器，私人_elementRef：ElementRef）{
this._elementRef.nativeElement.addEventListener（'铁选，（E）=＆GT; {
this.onChange（e.target.selected）;
}）;
} writeValue（价值：任意）：无效{
如果（this._elementRef.nativeElement.select）{
this._elementRef.nativeElement.select（值）;
}
其他{
this._elementRef.nativeElement.setAttribute（选中，值）;
}
} registerOnChange（FN：（）=＆GT;的）：无效{this.onChange = FN; }
registerOnTouched（FN：（）=＆GT;的）：无效{this.onTouched = FN; }
}
I decided to take some time this weekend to look at Angular 2 and Polymer. I'm really interested in angular 2 and would really like to start building something with it. One downside with starting with Angular 2 now is that there is no good component library yet. However, since Angular 2 claims that it should work so good together with Web Components I thought of giving Polymer a try. I have succeeded to bind data to simple components like an input field. What I'm stuck at for the moment is how to bind a model to the selected object of a paper-dropdown-menu. Since I'm very new into both I don't really know how to do it but this is what I have tried so far. Has anyone accomplished to bind an angular 2 model to a polymer dropdown?
<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>
EDIT: I have now created a ValueAccessor which seems to work acceptable with one exception. I try to get the dropdown to have a pre-selected value by setting the selected attribute in the writeValue method. At first this seemed to work but after I made this change I can no longer change the selected value. It works if I hardcode the value in the template so it seems to have something to do with angular together with polymer. I tried to follow the stacktrace and compare the difference between the two are. When I hardcode the value a setter method for selected is executed which trigger an item-select event. When I follow the same trace when I set the property in the valueAccessor there the setter method is no longer executed. Seems to be a problem with the interaction between angular 2 and polymer.
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; }
}
I finally solved this by my own by implementing a custom Value Accessor, mainly by looking at how the default value accesssor is implmented. https://github.com/angular/angular/blob/2.0.0-alpha.46/modules/angular2/src/common/forms/directives/default_value_accessor.ts
I struggled a bit with this since paper-menu wants the pre-selected value to be set as an attribute in the rendered html. In my first attempt I used angulars internal setProperty to set the selected value. However, this sets the DOM property and not the HTML attribute and resulted in that polymer didn't create a get,set property of selected which prevented the menu to trigger iron-select event which the dropdown menu listens for. Lesson learned, remember the difference between HTML and 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; }
}
这篇关于绑定角2型聚合物下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
