Angular4 基本指令不起作用

Question

我正在尝试使用自定义指令更改 div 的背景颜色，但它不起作用，下面是我使用 angular cli 生成的组件的代码。

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

@Directive({
  selector:"[ccCardHover]"
})
class CardHOverDirective {
  constructor(private el: ElementRef,
              private renderer: Renderer) {
    renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'blue');
  }
}
@Component({
  selector: 'app-custom-directive',
  template: `
  <div class="panel panel-default" ccCardHover>
    <p class="panel-body">Body text</p>
  </div>`
})
export class CustomDirectiveComponent implements OnInit {
  ngOnInit() {}
}

为什么不将“panel panel-default”的背景设为蓝色？

Answer 1

在仔细检查我的代码后，我注意到两件事

1. 导出自定义指令:

   导出类 CardHoverDirective { ..

2. 在app.module.ts中导入并声明