符号 ::after css，不适用于 Angular 5 的指令

Posted 2023-02-22

【中文标题】符号 ::after css，不适用于 Angular 5 的指令

【英文标题】：Notation ::after css, not work in directive of Angular 5

【发布时间】：2018-08-08 20:35:13

【问题描述】：

我需要的是必填字段中的星号 我有这个代码

.required label::after 
    content: '*';
    color: red;

在我的html中

<div class="required" >
  <label for="entity"> entity </label>
  <div>
    <select id="entity">
      <option value="">Entity</option>
    </select>
  </div>
</div>

这很好用。

但我想把它放在一个指令中。

这是我的指令

@Directive(
  selector: '[lambRequired]',
  host: 
    '[style.after.content]': '"*"',
    '[style.after.color]': '"red"',
  ,
)
export class RequiredDirective 
    constructor() 
    

在我的html中

  <div >
    <label lambRequired for="entity"> entity </label>
    <div>
      <select id="entity">
        <option value="">Entity</option>
      </select>
    </div>
  </div>

但这已经不起作用了

帮助我，我将不胜感激。

谢谢

【参考方案1】：

您不能使用这种方法来做到这一点，因为伪元素实际上并不是 DOM 树的一部分。因此，它们不会以任何方式暴露在 DOM API 上。

为了能够使用伪元素，您需要像以前一样使用类/css。

但是，除非您打算在指令上添加更多功能，否则看不到您必须创建一个指令，该指令只会更改文本颜色并附加星号，而无需任何实际逻辑或事件监控.对于这样一个简单的目标，css 类会更有效。