自定义复选框包装原生复选框，能否复用其ControlValueAccessor？

不行，你没法直接把模板内的原生复选框作为NG_VALUE_ACCESSOR的提供者，原因如下：

• NG_VALUE_ACCESSOR要求提供者必须是实现了ControlValueAccessor接口的类实例，而模板里的<input type="checkbox">是普通DOM元素，不属于Angular可注入的组件/指令实例，无法通过useExisting直接引用。

不过可以通过代理原生复选框的ControlValueAccessor逻辑来避免写冗余样板代码，下面是具体实现方案：

方案：通过ViewChild代理原生复选框的表单交互逻辑 #

组件类代码 #

import { Component, ViewChild, ElementRef, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-custom-checkbox',
  templateUrl: './custom-checkbox.component.html',
  styleUrls: ['./custom-checkbox.component.scss'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomCheckboxComponent),
    multi: true
  }]
})
export class CustomCheckboxComponent implements ControlValueAccessor {
  // 获取模板中的原生复选框DOM元素
  @ViewChild('nativeCheckbox') nativeCheckbox!: ElementRef<HTMLInputElement>;

  // 实现ControlValueAccessor的四个方法，全部代理给原生复选框
  writeValue(value: any): void {
    this.nativeCheckbox.nativeElement.checked = !!value;
  }

  registerOnChange(fn: any): void {
    this.nativeCheckbox.nativeElement.addEventListener('change', (e) => {
      fn((e.target as HTMLInputElement).checked);
    });
  }

  registerOnTouched(fn: any): void {
    this.nativeCheckbox.nativeElement.addEventListener('blur', fn);
  }

  setDisabledState(isDisabled: boolean): void {
    this.nativeCheckbox.nativeElement.disabled = isDisabled;
  }
}

模板代码（custom-checkbox.component.html） #

<!-- 原生复选框可隐藏，仅保留表单交互能力 -->
<input #nativeCheckbox type="checkbox" class="sr-only">
<!-- 自定义样式的复选框外观 -->
<div class="custom-checkbox" [class.checked]="nativeCheckbox.checked" (click)="nativeCheckbox.click()">
  <span class="check-icon"></span>
  <ng-content></ng-content>
</div>

简化替代方案（仅样式自定义场景） #

如果你的需求只是在特定条件下给原生复选框加样式，完全不用自定义组件，直接用Angular内置指令绑定样式即可：

<input 
  type="checkbox" 
  [(ngModel)]="isChecked"
  [ngClass]="{'special-styles': shouldApplyCustomStyle}"
>

内容的提问来源于stack exchange，提问作者ertucode