如何在Angular中实现另一个ControlValueAccessor并解决指令冲突？

你遇到的错误核心原因是：带有datepicker属性的日期输入框同时匹配了两个实现ControlValueAccessor的指令，Angular无法确定该使用哪一个，因此抛出了冲突错误。下面是两种可行的解决办法：

方法1：修改基础指令选择器，从根源避免冲突 #

最简单且最干净的方式是调整你的基础日期指令选择器，让它只匹配没有datepicker属性的日期输入框，这样两个指令就不会同时作用在同一个元素上：

@Directive({
  selector: 'input[type=date]:not([datepicker])', // 添加:not([datepicker])排除带datepicker属性的元素
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => BaseDateDirective),
      multi: true
    }
  ]
})
export class BaseDateDirective implements ControlValueAccessor {
  // 你的基础指令逻辑...
}

这样设置后，当输入框带有datepicker属性时，只会匹配你的DatepickerDirective，完全避免了冲突。

方法2：在Datepicker指令中禁用基础指令的ValueAccessor功能 #

如果无法修改基础指令的选择器，可以在DatepickerDirective的构造函数中注入基础指令，并清空它的回调函数，让它失去ControlValueAccessor的作用，确保只有datepicker的实现生效：

import { Directive, Optional, Self, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { BaseDateDirective } from './base-date.directive';

@Directive({
  selector: 'input[type=date][datepicker]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatepickerDirective),
      multi: true
    }
  ]
})
export class DatepickerDirective implements ControlValueAccessor {
  constructor(
    @Optional() @Self() private baseDateDirective: BaseDateDirective
  ) {
    // 如果基础指令存在，清空它的回调函数，使其失去ValueAccessor功能
    if (this.baseDateDirective) {
      this.baseDateDirective.registerOnChange(() => {});
      this.baseDateDirective.registerOnTouched(() => {});
    }
  }

  // 实现你的datepicker指令的ControlValueAccessor方法
  writeValue(value: any): void { /* 你的逻辑 */ }
  registerOnChange(fn: any): void { /* 你的逻辑 */ }
  registerOnTouched(fn: any): void { /* 你的逻辑 */ }
  setDisabledState(isDisabled: boolean): void { /* 你的逻辑 */ }
}

补充说明：为什么更具体的选择器没自动优先？ #

你可能会好奇，input[type=date][datepicker]明明比input[type=date]更具体，为什么Angular没有自动优先使用它？这是因为Angular会同时应用所有匹配的指令到目标元素上，而不是只选择最具体的那一个。所以两个指令的ControlValueAccessor提供者都会被注册，导致表单控件找到多个匹配的ValueAccessor，最终抛出冲突错误。

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