角度2ディレクティブは、異なるファイル内で動作しません

Question

私は現在@Directivesと@Hostlistenersとの問題を抱えていると私はあなたの助けが大好きだ、私は知らない

なぜ私は入力にディレクティブを追加するときそれは何もしません、それは何もイベントを発射しない、console.logでも、私は逃しているものがなければならないので、今は必死ですが、私は今何をしないのですか?? :(

私は次のプロジェクト構造を有している。

app 
| 
|___ components 
| | 
| |___ Autocomplete 
|  |___ autcomplete.component.html 
|  |___ autcomplete.component.ts 
|  |___ autcomplete.component.css 
| 
| 
|___ directives 
| |___ keyboard.directive.ts 
| 
|___ app.module.ts 

autocomplete.component.htmlで

<div class="input-field"> 
    <label [attr.for]="id">{{ label }}</label> 
    <input keyboard type="text" [(ngModel)]="inputData" 
      name="inputData" [attr.id]="id" 
      class="autocomplete-input" autocomplete="off"/> 
</div> 

とkeyboard.directive.ts

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

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

export class KeyboardDirective { 

    constructor(el: ElementRef) {} 

    @HostListener('focus', ['$event']) onFocus(value: string) { 
     console.log('Focus caught.'); 
    } 

    @HostListener('keydown', ['$event']) onKeyPressed(e: any) { 
     console.log('keydown event); 
    } 
} 

と私のアプリ。 module.tsはこのようになります

import {KeyboardDirective} from '../app/directives/keyboard.directive'; 

@NgModule({ 
    declarations: [ 
     KeyboardDirective 
    ], 
    providers: [], 
    schemas: [ 
     CUSTOM_ELEMENTS_SCHEMA 
    ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule {} 

私は、コンポーネント自体に追加しようと、それは動作しますが、他のフォルダ内にあるとき、それはしていませんので、私はなぜこれが起こっている上の任意のヒントを感謝します。

Answer 1

私は完全なコードを持っていないので、私はあなたの可能性ミスをリストアップします：

1 - あなたのオートコンプリートコンポーネントを宣言するモジュールでは、ディレクティブをインポートする必要があります。私はあなたのコンポーネントがどこにでも宣言されているのを見ません。

2 - ディレクティブは、同じモジュール内にない場合、あなたはあなたのディレクティブを宣言したモジュールをインポートする必要があります。 appModuleで宣言して以来、あなたのディレクティブ用に別のモジュールを作成することをお勧めします。

3 - ディレクティブ・モジュールでは、あなたはディレクティブをエクスポートする必要があります。それ以外の場合は、ディレクティブ/コンポーネントが不明であるというエラーが表示されます。

あなたがそれを試してあなたの投稿を更新することができれば、それは良いことです！