带有 ngModel 和 ngControl 的 Angular 2 指令答案

【问题标题】：Angular 2 Directive with ngModel and ngControl带有 ngModel 和 ngControl 的 Angular 2 指令
【发布时间】：2016-06-23 01:41:44
【问题描述】：

我想编写一个 Angular 2 指令，它应该具有以下行为：

无论有无包装都必须可用<form [ngFormModel]="form">
应该使用[(ngModel)]进行数据绑定
在内部使用 Observer，它会在最后一次用户输入发生 250 毫秒后更新 ngModel
当使用包装 <form [ngFormModel]="form"> 时，应该可以监听 form.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。

我做错了什么？或者有人有一些有效的示例代码吗？

提前致谢！

【问题讨论】：

标签： typescript angular angular2-template angular2-directives angular2-forms

【解决方案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 的作用是什么，但它确实有效！

【讨论】：