(change) 上的全局指令阻止组件本地的某些绑定方法运行

Question

我们想 .trim() 一个相当大的 angular2 项目中的所有输入。我们所有的表单都是基于模板的非 ReactiveForms。因为我不想重构我们拥有的每一个输入，所以我认为指令是可行的方法。

此外，各种组件附加 (input) 或 (change) 侦听器（例如，在用户键入时附加到字段中的大写文本）。

我下面的实现取自 this Plunker (written by an Angular contributor in response to this bug) and this solution（它早于 Angular2 Final，并且在当前状态下不可用）。

使用以下代码，我的组件级方法不再被调用（就像上面提到的输入到大写的方法）。

编辑：看来至少有一些组件级别的(blur)方法仍然被调用。

我想我错过了一些东西，比如将执行传递给组件的调用？

我试过：

但这并没有帮助，
实施 ControlValueAccessor 而不是 DefaultValueAccessor。

也许与 forwardRef 有什么关系？

我的 Trim 指令：

import { Directive, Renderer, ElementRef, forwardRef } from "@angular/core";
import { DefaultValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

const TRIM_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => TrimValueAccessor),
    multi: true
};

@Directive({
    selector: 'input[type=text]',
    host: { '(change)': 'trim($event.target.value)' },
    providers: [TRIM_VALUE_ACCESSOR]
})

export class TrimValueAccessor implements DefaultValueAccessor {

    onChange = (_: any) => {};
    onTouched = () => {};

    constructor(private renderer: Renderer, private elementRef: ElementRef) {};

    trim(value: any): void {
        if (value) {
            value = value.toString().trim();
            this.writeValue(value);
        }
        this.onChange(value);
    };

    registerOnChange(fn: (value: any) => any): void { this.onChange = fn; }

    registerOnTouched(fn: () => any): void { this.onTouched = fn; }

    writeValue(value: any): void {
        this.renderer.setElementProperty(this.elementRef.nativeElement, 'value', value);
    }
}

这是全局加载的 NgModule[declarations]

Answer 1

你不知道吗：原来在其他地方有一个回归（在我开始这个功能的同时合并）破坏了其他功能。

可能与某人相关的旁注：

我的最终实现 implements ControlValueAccessor（而不是 DefaultValueAccessor）
我从原始链接的 Plunker 添加了对绑定到 (blur) 的 this.onTouched(); 的调用。

(change) 上的全局指令阻止组件本地的某些绑定方法运行

Global Directive on (change) prevents some bound methods local to a Component from running

angular2-forms

angular2-directives

angular

(change) 上的全局指令阻止组件本地的某些绑定方法 运行

Global Directive on (change) prevents some bound methods local to a Component from running

angular2-forms

angular2-directives

angular

(change) 上的全局指令阻止组件本地的某些绑定方法运行