符号::在css之后，不能在Angular 5的指令中工作

Question

我需要的是所需字段中的星号我有这段代码

.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>

但这不再适用了

帮助我，我将不胜感激。

谢谢

Answer 1

您不能通过使用此方法来执行此操作，因为伪元素实际上不是DOM树的一部分。因此，它们不会以任何方式暴露在DOM API上。

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

但除非你计划在指令上有更多的功能，否则你不会看到创建一个只会改变文本颜色并附加星号而没有任何实际逻辑或事件监视的指令会产生什么样的增益。对于这样一个简单的目标，css类会更有效率。