Angular4基本指令不起作用

Question

I am trying to change the background color of a div using a custom directive, but its not working, below is the code of my component generated using 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() {}
}

Any ideas why is not making the background of "panel panel-default" blue?

Answer 1

After a more careful review of my code, I noticed two things

1. Export the custom directive:

   export class CardHoverDirective { ..

2. Import and declare it in the app.module.ts

Answer 2

That works just fine, but here is another way of doing it :

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

}

https://plnkr.co/edit/A4jsawihIpO0sCoRVbCm

Answer 3

in your directive use -

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