时间戳

首页 > 解决方案 > 具有属性选择器的组件上的主机绑定不起作用

angular - 具有属性选择器的组件上的主机绑定不起作用

问题描述

目标：我想使用@Hostbinding从指令中自定义组件属性。属性名称已禁用。

问题：我收到此错误：

无法绑定到 'disabled'，因为它不是 'sd-form' 的已知属性。\n1. 如果 'sd-form' 是一个 Angular 组件并且它具有 'disabled' 输入，则验证它是该模块的一部分。\n2. 如果“sd-form”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。\n3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。已识别，但它是使用该指令的组件的一部分。

这是我的指令

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

  @Input('sixDisableNotAutorized')
  autority: AuthorityEnum;

  @HostBinding('disabled')
  disabledState: boolean;
  ...
}

这是我的组件：

@Component({
  selector: 'sd-form[radio-group], sd-form[radio-group-inline]',
  templateUrl: './form-radio-group.component.html',
  styleUrls: [
    './form-radio-group.component.scss',
  ],
  encapsulation: ViewEncapsulation.None
})
export class SdFormRadioGroupComponent extends CustomValueAccessorComponent<ISdFormComponentItem> implements ControlValueAccessor {

  currentValue: ISdFormComponentItem;

  @HostBinding('class.six__is-disabled')
  @Input()
  disabled = false;

  ...
}

这是dom：

<sd-form radio-group
         formControlName="myForm"
         idField="myForm"
         nameField="myForm"
         [sixDisableNotAutorized]="'EDITION_BI_CHANTIER'">
</sd-form>

标签： angular

解决方案

更改@HostBinding('disabled')为@HostBinding('attr.disabled')

推荐阅读