指令现在会导致“无法绑定到'blur‘，因为它不是一个已知的’输入‘属性。”

Question

在我们的角4.3.2项目中，我们有一个指令，.trim()的各种类型的输入。全部：

import { Directive, ElementRef, forwardRef, HostBinding, Renderer2 } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";

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

@Directive({
  selector: 'input[type=text]:not(#autocomplete-keyboard-access):not([disabled]):not(.dropdown-box), input[type=email]',
  providers: [TRIM_VALUE_ACCESSOR]
})

export class TrimDirective implements ControlValueAccessor {
  onChange = (_: any) => {};
  onTouched = () => {};

  constructor(private renderer: Renderer2, private elementRef: ElementRef) {}

  @HostBinding('blur')
  blur() {
    this.onTouched();
  }

  @HostBinding('change')
  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 {
    if (typeof value !== 'undefined') {
      this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
    }
  }
}

它被导入相关的@NgModule中。类似地，FormsModule存在于NgModule.imports[]中。

在模板中，我现在在模板编译时(无论是在浏览器中还是在AoT中)出现以下错误：

不能绑定到“模糊”，因为它不是一个已知的属性‘输入’。

无论指令应用到哪里，都会抛出错误。

一个有问题的模板(可以追溯到beta-6天，并且从那以后就没有被重构过)：

<input #userEmail
       name="email"
       type="email"
       class="modal-fixed-width-input" maxLength="128"
       required
       placeholder="email@domain.com"
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
       [ngClass]="{'bg-yellow red' : !emailFocus && emailErrorMessage}"
       [(ngModel)]="userMail"
       (ngModelChange)="fieldsChange=true"
       ngControl="email"
       #email="ngModel"
       (focus)="emailFocus=true"
       (blur)="emailFocus=false; userEmail.value = userEmail.value.trim(); emailErrorMessage = isEntryValid(userEmail.value, 'Email');">

在转换到角CLI之前，这个指令起了作用。由于FormsModule是正确导入的(这通常是对此错误的解释)，所以我无法解释为什么这个指令的事件侦听器绑定会导致这个编译错误。

Answer 1

在blur元素上没有change和input属性。

我想你是在找@HostListener

@HostListener('blur')
....
@HostListener('change')

@HostListener装饰器允许您订阅主机元素的事件，同时

@HostBinding将属性绑定到宿主元素