Angular2ディレクティブが動作しない

Question

私はビデオチュートリアルに従って単純なディレクティブを使用しようとしています。私はなぜ、私のコードはテキストの色に影響しないか分からない。誰かが私を助けることができますか？

app.component.html：

<p colorer>textTMP</p> 

app.component.ts：

import { Colorer } from './colorer.service'; 


@Component({ 
    selector: 'app-component', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'], 
    providers: [ Colorer], 
}) 
export class AppComponent{} 

colorer.service.ts：

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


@Directive({ 
    selector: '[colorer]', 
    host: { 
     '(mouseenter)': 'color()' 
    } 
}) 

export class Colorer { 
    constructor(private _el: ElementRef) {} 

    color() { 
     this._el.nativeElement.style.color = 'red'; 
    } 

} 

Answer 1

指示されていませんここでは、コードですサービス。それをプロバイダとして注入することはできません。コンポーネントとともにモジュールで宣言する必要があります。

@NgModule({ 
    imports: [ 
     BrowserModule 
    ], 
    declarations: [ AppComponent, Colorer ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

これを示すPlunker sampleを参照してください。