Angular 7: Невозможно связать с «директивой», так как это не известное свойство «элемента»

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

правильный синтаксис:

<input class="text" appInputFormat>

Вы помещаете вещи в скобки, когда они принимают ввод, как если бы вы также объявили ввод с тем же именем в директиве, аналогично вы можете использовать пареныесли вы объявите выход с тем же именем.

Answer 2

Глядя на документацию здесь: https://angular.io/guide/attribute-directives

Этот тип селектора:

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

Создает директиву .

Именно скобки ([]) делают его селектором атрибутов.

Таким образом, его следует использовать в качестве атрибута, подобного следующему:

<input class="text" appInputFormat>

Скобки при определении селектор , но без использования скобок в Html при использовании директивы.