使用ngModel和ngControl的Angular 2指令

Question

我想編寫一個Angular 2指令，該指令應具有以下行為：

1. 必須在有包裝和沒有包裝的情況下使用<form [ngFormModel]="form">

2. 應該使用[(ngModel)]進行數據綁定

3. 內部使用Observer ，該Observer在上次用戶輸入發生后ngModel更新ngModel

4. 使用環繞式<form [ngFormModel]="form"> ，應該可以監聽form.valueChanges （當然，它應該在上次用戶輸入后觸發250ms）

---

我編寫了以下用於測試的指令：

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}));
    }
}

不使用ngControl時可以使用。 然后，它說找不到NgModel提供程序。

<form [ngFormModel]="form">
    <input queryDirective ngControl="..." type="text" [(ngModel)]="...">
</form>

但是，當我在構造函數上使用NgControl時， this.model.control.updateValue方法將不會更新ngModel 。

---

我究竟做錯了什么？ 還是有人可以使用示例代碼？

提前致謝！

Answer 1

我現在開始工作了！

這是我的指令：

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);
    }
}

我不知道bindings和NG_VALUE_ACCESSOR什么，但是它可以工作！