指令现在导致“无法绑定到'模糊'，因为它不是”输入“的已知属性。”

在我们的4.3.2项目中，我们有一个指令，即各种类型的输入。其全部内容如下：指令现在导致“无法绑定到'模糊'，因为它不是”输入“的已知属性。”

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。同样，在NgModule.imports[]中存在FormsModule。

模板，我现在已经在模板下面的错误编译时（无论是在浏览器或AOT）：

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

无论指令如何适用，都会引发错误。

有问题的模板（可追溯到的β-6天以来一直没有被重构）：

<input #userEmail 
     name="email" 
     type="email" 
     class="modal-fixed-width-input" maxLength="128" 
     required 
     placeholder="[email protected]" 
     pattern="[a-z0-9._%+-][email protected][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被正确导入（这通常是对此错误的解释），我无法解释为什么此指令的事件侦听器绑定会导致此编译错误。

来源

2017-07-31 msanford

我可以说一些愚蠢，请原谅我。我想也许在hostbinding中存在名称冲突模糊。你可以测试@HostBinding（'blur'） onBlur（）{.... – Vega

@Vega不是一个愚蠢的猜测，框架经常做这种名字绑定，但真正的问题在下面。 – msanford

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

我猜你正在寻找@HostListener

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

的@HostListener装饰，即可订阅host元素的事件，而

@HostBinding将绑定属性Host元素

来源

2017-08-01 04:16:55 yurzui

他可能与hostlitner混淆hostbinding，也许增加一些关于混淆的细节？ –

D'oh！是的，我在许多其他遗留组件中发现了这个确切的bug，并且错过了这个。奇怪的是，这是在使用'ng'编译UI之前编译的。任何额外的想法可能是为什么？ – msanford

指令现在导致“无法绑定到'模糊'，因为它不是”输入“的已知属性。”

回答

相关问题