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

【问题标题】：Notation ::after css, not work in directive of Angular 5符号 ::after css，不适用于 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>

但这已经不起作用了

帮助我，我将不胜感激。

谢谢

【问题讨论】：

标签： css angular directive angular-directive

【解决方案1】：

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

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

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

【讨论】：