Question

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

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

放入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。

我的问题是这种方式总是被禁用，我希望disable属性是用指令动态改变的。

非常感谢任何帮助。

Answer 1

有多种选择。一种方法是使用@HostBinding，这就是你需要的全部内容：

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

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

1 个答案: