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說明了這一點。