如何使用[ngClass]的自定义属性指令？

Question

我已经定义了一个自定义属性指令，它将共享'vvdirective'CSS类的元素改变为灰色背景和深蓝色字体。

import { Directive, ElementRef } from '@angular/core';
@Directive({
  selector: '.vvdirective'
})
export class VVdirectiveDirective {

  constructor(private elRef: ElementRef) {}
  ngOnInit() {
        this.elRef.nativeElement.style.backgroundColor = "gray";
        this.elRef.nativeElement.style.color = "navy";
        console.log("vv directive works!!")
  }
}

它将共享 "vvdirective "CSS类的元素 改为灰色背景和深蓝色字体。它还打印了一个控制台信息。

这对于一个传统的使用案例来说是可行的。

<div class="vvdirective">My custom attribute directive works in a plain old fashion way !</div>

Picture:

BUT

当我想在一个组件中使用这个指令时。

HTML:

<div [ngClass]="klass" >My custom attribute directive works even embedded in a component</div>

& TS:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-vvdiv',
  templateUrl: './vvdiv.component.html',
  styleUrls: ['./vvdiv.component.scss']
})
export class VvdivComponent implements OnInit {

  @Input() klass: string;

  constructor() { }

  ngOnInit() {
 }

}

＆amp; 在APP TS中调用。

<app-vvdiv klass="vvdirective"></app-vvdiv>

它不工作（背景字体的颜色没有改变，也没有打印任何控制台信息）。

图片。

应该是这样的。

图片：应该是这样的。

让我吃惊的是，就是最后这两个代码样本（老式指令调用的那个，和通过组件调用的那个）都有CSS类。

但只有第一个（没有嵌入到组件中）受到指令变化的影响。

看来后一种情况下，组件中使用的ngClass指令，工作原理不同。

也许是和app的生命周期有关，我不知道。

所以，如果你有什么想法，如何让组件同时使用ngClass和我的自定义指令，我会密切关注你的答案！你的答案是什么？

这里是PLUNKER。 plunker

这里的GITHUB仓库。git repo

最好的。

Answer 1

试试这个

<app-vvdiv (klass)="vvdirective"></app-vvdiv>

Answer 2

我改变了方式，用 输入的指令.

指令的TS。

//The directive
import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';

@Directive({
  selector: '[vvdirective]'
})
export class VVdirectiveDirective {
  @Input('vvdirective') params: string;
  constructor(
    private elRef: ElementRef,
    private renderer: Renderer2) { }
  ngOnInit() {
    if (this.params === 'vvstyle number two') {
      console.log("in the first condition for other style number two")
      console.log(this.params)
      this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'black');
      this.renderer.setStyle(this.elRef.nativeElement, 'color', 'yellow');
    } else {
      console.log("in the default condition for default style")
      console.log(this.params)
      this.renderer.setStyle(this.elRef.nativeElement, 'background-color', 'gray');
      this.renderer.setStyle(this.elRef.nativeElement, 'color', 'navy');
    }
  }
}

嵌入组件的HTML。

//the call to that directive in the embedded component
<div [vvdirective]="klass">My custom attribute directive works even embedded in a component</div>

应用组件的HTML。

//the call to that directive in the app component
<div  vvdirective="vvstyle">My custom attribute directive works in a plain old fashion way !</div>
<app-vvdiv klass="vvstyle"></app-vvdiv>
<app-vvdiv klass="vvstyle number two"></app-vvdiv>

这样我就成功地改变了组件的样式（不需要ngClass），而且我还能触发条件语句（业务规则）。

---

附件

更新了git repo。https:/github.comvinny59200VVAttributeDirectiveAndNgclass。

相关的灌篮高手。https:/plnkr.coeditUMuoS0lfxD7OuAsi?预览。

网页截图。

来源截图：