css - 符号::在 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 类会更有效。