未捕获错误：无法编译HighlightDirective，因为它不是一个组件

Question

错误日志：

runtime_compiler.js：353Uncaught错误：无法编译'HighlightDirective'，因为它不是component.assertComponent ...

指示：

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 { }

查看文档here

希望这可以帮助！！