代码之家 › 专栏 › 技术社区 › Heartcroft

button@指令通过@input in angular绑定disable属性

directive angular

3

Heartcroft · 技术社区 · 8 年前

我正在尝试创建一个按钮指令,它可以接收一个布尔通孔。 @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 方便的时候。

我的问题是,这种方式总是被禁用的,我希望禁用属性是动态地更改指令。

任何帮助都将不胜感激。

1 回复 | 直到 8 年前

1

6

Poul Kruijt 8 年前

有多种选择。其中之一就是 @HostBinding ,这就是您所需要的:

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