@HostListener('change') 不起作用 - Angular2 RC1

Question

我创建了一个属性指令myOptional，用于表单中的输入，其目的是指示某些字段是可选的。这是通过向输入添加一个类，然后使用 css 伪元素显示可选文本来完成的::after。

“可选”标签仅在输入的值为空且焦点在别处时才显示。

因此，当指令初始化时，我们将类添加到输入

ngOnInit() {
    this.addOptionalClass();
}

在焦点上，我们删除了类，因此， Optional 标签

@HostListener('focus') onfocus() {
    this.removeOptionalClass();
}

在模糊时，如果输入的值仍然为空，我们将显示标签

@HostListener('blur') onblur() {
    if (this.isInputElement()) {
        let inputValue = (<HTMLInputElement>this.el).value;
        if (inputValue === '') this.addOptionalClass();
    }
}

到现在为止还挺好。当通过更新表单中的控件来设置输入的值时会出现问题。在这种情况下，当输入的值更新且不为空时，我想删除该类。

我以为我可以将事件侦听器附加到onchange事件，但根本不会触发下面的代码。我什至尝试使用document.getElementBydId同样修改输入的值，但没有成功。

@HostListener('change') onchange() {
    console.log((<HTMLInputElement>this.el).value);
}

希望我说清楚了。任何帮助将不胜感激。

Answer 1

我最终通过将控件的值作为输入传递来解决了这个问题。然后，在ngOnChanges生命周期挂钩上，我评估输入并根据它是否有价值来添加/删除该类。

export class OptionalDirective implements OnInit, OnChanges {
    @Input('myOptional') private controlValue: string;

    constructor(private elementRef: ElementRef) {
        this.el = elementRef.nativeElement;
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        if (changes['controlValue'] &&
            !changes['controlValue'].isFirstChange()
            && changes['controlValue'].currentValue !== changes['controlValue'].previousValue) {
            if (this.controlValue) this.removeOptionalClass();
            else this.addOptionalClass();
        }
    }
}