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示例 。