Angular 按钮@Directive通过@Input绑定禁用属性

我试图创建一个按钮指令，它可以通过

@Input

接收布尔值，并绑定到

元素的

disable

属性

以下是到目前为止我得到的信息：

加载按钮.指令.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

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

---

任何帮助都将不胜感激。

有多种选择。一种是使用

@HostBinding

，这就是您所需要的：

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

---

您只需将属性设置为onInit，因为它没有被定义为可观察的，所以您永远不会更改状态并返回forth@Gen（不客气：）99.9%的时候你真的不需要渲染器