Typescript 带ngModel和ngControl的Angular 2指令
我想写一个Angular 2指令,它应该具有以下行为:Typescript 带ngModel和ngControl的Angular 2指令,typescript,angular,angular2-template,angular2-directives,angular2-forms,Typescript,Angular,Angular2 Template,Angular2 Directives,Angular2 Forms,我想写一个Angular 2指令,它应该具有以下行为: 必须可在有包装和无包装的情况下使用 应使用[(ngModel)]进行数据绑定 在内部使用Observer,在上次用户输入发生250毫秒后更新ngModel 当使用包装时,应该可以监听表单.valueChanges(当然应该在最后一次用户输入250毫秒后触发) 我编写了以下测试指令: import {Directive, EventEmitter, Input, Output} from 'angular2/core' import {Ng
[(ngModel)]
进行数据绑定Observer
,在上次用户输入发生250毫秒后更新ngModel
表单.valueChanges
(当然应该在最后一次用户输入250毫秒后触发)我编写了以下测试指令:
import {Directive, EventEmitter, Input, Output} from 'angular2/core'
import {NgModel} from 'angular2/common'
import {Observable} from 'rxjs/Observable'
@Directive({
selector: '[queryDirective]'
})
export class QueryDirective {
constructor(public model:NgModel) {}
ngOnInit() {
this.model.control.valueChanges
.debounceTime(250)
.subscribe(val => this.model.control.updateValue(val,{emitEvent:true}));
}
}
使用nongControl
时,它工作。然后它说找不到NgModel
的提供者
<form [ngFormModel]="form">
<input queryDirective ngControl="..." type="text" [(ngModel)]="...">
</form>
但是当我在构造函数上使用NgControl
时,this.model.control.updateValue
方法不会更新ngModel
我做错了什么?或者有没有人有一些正在运行的示例代码 提前谢谢 我现在开始工作了 这是我的指示:
import {Directive, Renderer, ElementRef, forwardRef, Provider} from 'angular2/core'
import {NG_VALUE_ACCESSOR, DefaultValueAccessor} from 'angular2/common'
import {CONST_EXPR} from 'angular2/src/facade/lang'
import {Observable} from 'rxjs/Observable'
const PROVIDER = CONST_EXPR(new Provider(NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => QueryDirective), multi: true}));
@Directive({
selector: '[queryDirective]',
bindings: [PROVIDER]
})
export class QueryDirective extends DefaultValueAccessor {
constructor(_renderer: Renderer, private el: ElementRef) {
super(_renderer, el);
}
ngOnInit() {
Observable.fromEvent(this.el.nativeElement, 'keyup')
.map(val => this.el.nativeElement.value)
.debounceTime(this.timeout)
o.subscribe(this.onChange);
}
}
我不知道绑定
和NG\u VALUE\u访问器
的功能是什么,但它是有效的