Angular 7：无法绑定到 'directive'，因为它不是 'element' 的已知属性

Question

我正在尝试创建自定义指令，但出现此错误：

该指令包含在@NgModule 内的声明中。尽管如此，还是行不通。如果您需要有关错误的更多信息，请询问。不知道怎么回事

app.component.html

<input class="text" [appInputFormat]>

输入-format.directive.ts

[![import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[appInputFormat]'
})
export class InputFormatDirective {

    constructor(){};

  @HostListener('focus')  onFocus(){
    console.log('on Focus');
  }
  @HostListener('blur')  onBlur(){
    console.log('on Blur');
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from '@angular/forms';



import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseComponent } from './course/course.component';
import { FavoriteComponent } from './favorite/favorite.component';
import { PanelComponent } from './panel/panel.component';
import { LikeButtonComponent } from './like-button/like-button.component';
import { LikeCountComponent } from './like-count/like-count.component';
import { DirectivesComponent } from './directives/directives.component';
import { HiddenComponent } from './hidden/hidden.component';
import { SwitchcaseComponent } from './switchcase/switchcase.component';
import { ForComponent } from './for/for.component';
import { TrackbyComponent } from './trackby/trackby.component';
import { IfComponent } from './if/if.component';
import { StyleComponent } from './style/style.component';
import { TransopComponent } from './transop/transop.component';
import { InputFormatDirective } from './input-format.directive';

@NgModule({
  declarations: [
    AppComponent,
    CourseComponent,
    FavoriteComponent,
    PanelComponent,
    LikeButtonComponent,
    LikeCountComponent,
    DirectivesComponent,
    HiddenComponent,
    SwitchcaseComponent,
    ForComponent,
    TrackbyComponent,
    IfComponent,
    StyleComponent,
    TransopComponent, 
    InputFormatDirective
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

查看此处的文档：https://angular.io/guide/attribute-directives

此类选择器：

@Directive({
  selector: '[appInputFormat]'
})

建立一个属性指令。

It's the brackets ([]) that make it an attribute selector.

所以它必须像这样用作属性:

<input class="text" appInputFormat>

定义选择器时有括号，但使用指令时Html没有括号。

Answer 2

正确的语法是：

<input class="text" appInputFormat>

当它们接受输入时，您将它们放在括号中，就像您还在指令中声明了同名输入一样，同样，如果您声明了同名输出，则可以使用括号。

Angular 7：无法绑定到 'directive'，因为它不是 'element' 的已知属性

Angular 7: Can't bind to 'directive' since it isn't a known property of 'element'

angularjs-directive

angular

Angular 7：无法绑定到 'directive'，因为它不是 'element' 的已知 属性

Angular 7: Can't bind to 'directive' since it isn't a known property of 'element'

angularjs-directive

angular

Angular 7：无法绑定到 'directive'，因为它不是 'element' 的已知属性