未捕获的错误:无法编译HighlightDirective，因为它不是组件

Question

错误日志:

runtime_compiler.js:353Uncaught错误:无法编译'HighlightDirective'，因为它不是一个组件。…

指令:

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

@Directive({
  selector: '[dirHighlight]'
})
export class HighlightDirective {
  constructor(private elementRef: ElementRef, private renderer :Renderer) {
  //this.elementRef.nativeElement.style.backgroundColor = 'green';
    this.renderer.setElementStyle(this.elementRef.nativeElement,'background-color', 'green');
  }

}

Html文件:

<h2> Custom Attribute Directive</h2>
<div dirHighlight> Some thing</div>

app.component.ts

import { Component } from '@angular/core';
import { HighlightDirective } from './highlight.directive';
@Component({
  selector: 'dir-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  entryComponents:[HighlightDirective],
})
export class AppComponent {
}

Answer 1

你需要在主模块中添加指令，而不是作为entryComponents

import { HighlightDirective } from './highlight.directive';
@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    HighlightDirective
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

看这里的文档

希望这有帮助!!