具有可选属性的自定义指令的角度CSS选择器

Question

可以说我创建了一个自定义指令，其选择器是[myCustomDirective]，该指令具有可选的输入参数。所以它可以像这样使用：

<div myCustomDirective></div>

或

<div [myCustomDirective]="someBooleanFromController"></div>

同时，在指令控制器内部，我将伪类添加到应用了指令的elementRef上。

我的问题是，无论我是否为指令提供可选属性，指令的css选择器应如何应用。 我试图像这样使用选择器：

[myCustomDirective]:pseudoClassName { 
   // ... some css
}

在没有参数的情况下使用myCustomDirective可以达到目的，但是在为myCustomDirective提供参数的情况下，该方法不起作用。

我也尝试过这样的选择器：

[myCustomDirective="true"]:pseudoClassName { 
   // ... some css
}

但这没用

Answer 1

尝试以下代码：

HTML

app.component.html

<p [appBetterHighlight]="'Yellow'">Highlight with App better directive</p>

CSS

style.css

 p[ng-reflect-app-better-highlight] {
    color: blue !important;
 }

这是在浏览器工具中解释html的方式

<p _ngcontent-c4="" ng-reflect-app-better-highlight="Yellow" style="">Highlight with 
 App better directive</p>

将CSS添加到特定自定义指令的最佳方法是如下所示：

p[ng-reflect-{custom directive name}] { 
    // css here
}

stackblitz demo