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。

Angular2指令不起作用

1 个答案: