Typescript 带ngModel和ngControl的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

我想写一个Angular 2指令,它应该具有以下行为:

  • 必须可在有包装和无包装的情况下使用

  • 应使用
    [(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}));
        }
    }
    
    使用no
    ngControl
    时,它工作。然后它说找不到
    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访问器
    的功能是什么,但它是有效的