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

任何想法為什么不使“面板 - 默認”藍色的背景？

Answer 1

仔細檢查一下我的代碼之后，我發現了兩件事

1. 導出自定義指令：

   出口類CardHoverDirective {..

2. 導入並在app.module.ts中聲明它

Answer 2

這工作得很好，但這是另一種方法：

@Directive({
  selector:"[ccCardHover]",
  host:{
    '[style.backgroundColor]':'"red"'
  }
})
class CardHOverDirective {

}

https://plnkr.co/edit/A4jsawihIpO0sCoRVbCm

Answer 3

在你的指令中使用 -

constructor(private elRef: ElementRef) {
    elRef.nativeElement.style.backgroundColor = 'red';
  }