Angular使用@HostBinding绑定属性选择器组件disabled属性失效问题

你遇到的报错本质是Angular编译时的属性校验规则导致的：

1. @HostBinding('disabled') 默认优先绑定宿主元素的原生DOM属性，而非组件的@Input输入属性
2. 你的sd-form是自定义组件，没有原生的disabled DOM属性，Angular编译时无法识别你要绑定的是组件的输入属性，因此抛出未知属性错误。
3. 虽然目标组件确实声明了@Input() disabled，但指令的@HostBinding在编译阶段不会关联宿主组件的输入声明做校验，因此无法通过检查。

方案1（最推荐，类型安全无副作用）：在指令中注入宿主组件实例，直接修改输入属性 #

直接在指令构造函数中注入挂载的SdFormRadioGroupComponent实例，需要修改禁用状态时直接给实例的disabled属性赋值即可，跳过模板绑定校验逻辑。
代码示例：

@Directive({
  selector: '[sixDisableNotAutorized]'
})
export class NotAutorizedDisableDirective extends RxjsComponent implements AfterViewChecked {

  @Input('sixDisableNotAutorized')
  autority: AuthorityEnum;

  // 注入宿主组件实例
  constructor(private hostComponent: SdFormRadioGroupComponent) {
    super();
  }

  ngAfterViewChecked() {
    // 替换为你的权限判断逻辑
    const isDisabled = !checkAuth(this.autority);
    // 直接修改组件的disabled输入属性
    this.hostComponent.disabled = isDisabled;
  }
  ...
}

这个方案的优势是类型安全，完全贴合组件的输入定义，不会产生额外的兼容问题。如果修改后仍有报错，先确认两个点：1. 自定义指令和SdFormRadioGroupComponent都已正确导入到当前使用页面所属的模块；2. 指令的selector没有拼写错误，确实能匹配到你写的sixDisableNotAutorized属性。

方案2（通用方案，适配多组件共用指令的场景）：绑定DOM attribute而非属性 #

如果你的指令需要给多个带disabled输入的组件通用，不想绑定具体组件类型，可以将@HostBinding的目标改为原生attribute，同时兼容组件的输入接收逻辑：

// 注意绑定的是attr.disabled，不是disabled
@HostBinding('attr.disabled')
get disabledState() {
  // 原生disabled attribute只有存在/不存在两种状态，要禁用时返回'disabled'，不禁用时返回null
  return checkAuth(this.autority) ? null : 'disabled';
}

注意：使用这个方案需要你的SdFormRadioGroupComponent的@Input() disabled支持从原生attribute读取值，否则可能出现状态不同步的问题。

方案3（不推荐，仅做临时兼容）：模块新增schema配置 #

在你使用该组件和指令的模块的@NgModule配置中添加CUSTOM_ELEMENTS_SCHEMA，可以屏蔽所有自定义元素的未知属性报错：

@NgModule({
  // ... 其他模块配置
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourModule { }

这个方案的副作用是会屏蔽所有自定义元素的属性校验错误，如果你后续写了其他错误的属性绑定也不会有提示，不建议长期使用。

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