当我在Checkbox FormControl中设置值时，为什么我的：after伪选择器没有显示？

Question

我正在使用ControlValueAccesor接口在Angular中创建自己的自定义复选框，一切正常，直到我尝试使用Form Control API方法的setValue（）来操纵复选框值，然后复选框不会呈现伪选择器：after ，但是当我手动执行它会呈现它。

手动触发复选框（添加“已检查”属性和“：之后”） [按预期工作]

通过.setValue（true）、. setValue（false）方法触发复选框的值

：after即使状态为false也不会停止渲染

但是在其他情况下效果很好，唯一的区别是复选框具有

ng-untouched ng-pristine ng-valid 

课程

与此同时，由于我手动触发了更改而无法使用的复选框

ng-valid ng-touched ng-dirty

这是复选框代码 TS： https://gist.github.com/SeniorFlacko/69fe47d92f01e1c481942d808fbdc058 SCSS： https://gist.github.com/SeniorFlacko/abc0c727f08b8a0821cb063cb3356a92

这是我添加的方式：after checkbox.component.scss ``

> .label > .checkmark {
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 1px;
    height: 16px;
    width: 18px;

    &::after {
      position: absolute;
      content: "";
      display: none;
      left: 9px;
      top: -6px;
      width: 6px;
      height: 21px;
      border: solid $white;
      border-width: 0 2px 2px 0;
      transform: rotate(39deg);
    }
  }

``