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

Question

我已经定义了一个自定义属性指令：

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>

图片：

但是

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

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

}

&在APP TS中调用：

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

它不起作用（背景/字体颜色不改变并且不打印控制台消息）：

图片：

应该是这样的：

图片：

令我惊讶的是，最后两个代码示例（一个带有老式指令调用的一个，一个通过组件调用的一个）都有 CSS 类：

但只有第一个（未嵌入到组件中）受指令更改的影响。

看起来在后一种情况下组件中使用的 ngClass 指令，工作方式不同。

可能和app的生命周期有关，我不知道。

所以如果你知道如何同时使用 ngClass 和我的自定义指令来制作组件，我会密切关注你的回答！

这里是 PLUNKER：plunker

这里是 GITHUB 存储库：git repo

最好的，

Answer 1

我通过使用带有输入的指令改变了执行方式。

指令的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.com/vinny59200/VVAttributeDirectiveAndNgclass

相关插件： https://plnkr.co/edit/UMuoS0lfxD7OuAsi?preview

网页截图：

来源截图：

Answer 2

试试这个

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