angular - 按钮@Directive通过Angular中的@Input绑定(bind)禁用属性

Question

我正在尝试创建一个可以通过 @Input 接收 bool 值的按钮指令并绑定(bind)到 disable <button> 的属性元素。

这是我到目前为止所得到的:

loading-button.directive.ts

@Directive({ selector: '[appLoadingButton]' })
export class LoadingButtonDirective implements OnInit {
  @Input() loaderState: boolean;

  constructor(private renderer: Renderer2, private el: ElementRef) { }

  ngOnInit() {
    this.renderer.setAttribute(this.el.nativeElement, 'disabled', this.loaderState ? 'disabled' : '');
  }
}

模板

<button appLoadingButton [loaderState]="submitting"></button>

在该模板的组件中，submitting属性设置为 true或 false方便的时候。

我的问题是这样它总是被禁用，我期望禁用属性会随着指令动态变化。

任何帮助将不胜感激。

Answer 1

有多种选择。一种是使用 @HostBinding，这就是您所需要的:

@Directive({ selector: '[appLoadingButton]' })
export class LoadingButtonDirective {
  @Input() 
  @HostBinding('disabled')
  loaderState: boolean;
}