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

任何想法为什么不制作＆＃34;面板 - 默认＆＃34;蓝色？

Answer 1

在仔细检查我的代码之后，我发现了两件事

导出自定义指令：

出口类CardHoverDirective {..
导入并在app.module.ts

Answer 2

That工作得很好，但这是另一种方法：

@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';
  }

Angular4基本指令不起作用

3 个答案: