如何创建自定义组件,就像本机<input>标签一样？我想让我的自定义表单控件能够支持ngControl,ngForm,[(ngModel)].
据我所知,我需要实现一些接口,使我自己的表单控件工作就像本机一样.
此外,似乎ngForm指令仅绑定<input>标签,这是对的吗？我该如何处理？
让我解释为什么我需要这个.我想包装几个输入元素,使它们能够作为一个单独的输入一起工作.还有其他方法可以解决这个问题吗？再一次:我想让这个控件像原生一样.验证,ngForm,ngModel双向绑定等.
ps:我使用的是Typescript.
我有一套定制的聚合物元素,我想在角度2应用中使用.
似乎聚合物元件的内容标签存在问题.如果元件位于角度2分量内,则元件的内容在聚合物元件内的错误位置处被渲染.
例:
我的聚合物元素"my-button"的模板如下所示:
<template>
<button>
<content></content>
</button>
</template>
使用外角
当我在angular 2组件之外使用这个元素时,我得到了我期望的结果:
使用:
<my-button>Foo</my-button>
结果:
<my-button>
<button>
Foo
</button>
<my-button>
在角度2组件内使用
在角度2组件中使用时,内容始终在元素模板的末尾呈现.就像内容标签不存在一样.
使用:
<my-button>Foo</my-button>
结果:
<my-button>
<button>
</button>
"Foo"
<my-button>
题
问题可能是,聚合物和角2都使用内容标签进行转录.因此,将两者结合使用时,事情可能会变得有些混乱.
我很想在角度2内使用我所有的聚合物元素.所以关于如何解决这个问题的任何想法都将非常感激.
我本周末决定花点时间看看Angular 2和Polymer.我真的对棱角2感兴趣,并且真的想开始用它来构建一些东西.现在从Angular 2开始的一个缺点是还没有好的组件库.但是,由于Angular 2声称它应该与Web Components一起工作得很好,我想给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方法中设置selected属性来使下拉列表具有预先选择的值.起初这似乎有效,但在我做了这个改变后,我再也无法改变选定的值了.如果我对模板中的值进行硬编码,那么它似乎与角度和聚合物有关.我试着跟踪堆栈跟踪并比较两者之间的差异.当我对值进行硬编码时,执行select的setter方法,触发item-select事件.当我在valueAccessor中设置属性时,我遵循相同的跟踪,不再执行setter方法.似乎是角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) { …关于ngModel和DI的高级问题.
我可以在这里看到= https://github.com/angular/angular/blob/2.0.0-beta.1/modules/angular2/src/common/forms/directives/ng_model.ts#L68 ngModel wating供应商来自NG_VALUE_ACCESSOR OpaqueToken.这意味着如果我想创建应该支持ngModel绑定的自定义组件,我应该将我对ValueAccessor的实现传递给DI.所以我脑子里有两个问题.
1)我该怎么做？
2)<input>元素的默认ValueAccessor是什么？如何让它继续工作并仅使用我的自定义组件？
顺便说一下,我在这里看到:https://github.com/angular/angular/blob/2.0.0-beta.1/modules/angular2/src/common/forms/directives/shared.ts#L102 defaultValueAccessor是最后一个.所以这意味着如果我全局通过我的ValueAccessor通过DI系统而不是默认的从未返回过.