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

【问题标题】：Angular css selector for custom directive with optional attribute具有可选属性的自定义指令的角度 css 选择器
【发布时间】：2019-11-09 14:29:13
【问题描述】：

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

<div myCustomDirective></div>

或

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

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

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

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

当myCustomDirective 不带参数使用时，它成功了，但在为myCustomDirective 提供参数的情况下，它不起作用。

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

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

但是没用

【问题讨论】：

【解决方案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 添加到特定自定义指令的最佳方法是在 CSS 中访问它，如下所示：

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

【讨论】：