Кнопка @Directive для привязки отключить атрибут через @Input в Angular - PullRequest
Новая
       13

Кнопка @Directive для привязки отключить атрибут через @Input в Angular

0 голосов
/ 11 июня 2018

Я пытаюсь создать директиву кнопки, которая может получить логическое значение через @Input и получить привязку к атрибуту disable элемента <button>.

Вот что у меня получилосьfar:

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, когда это удобно.

Моя проблема в том, что таким образом он всегда отключен, и я ожидал, что атрибут disable динамически изменялся с помощью директивы.

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 11 июня 2018

Есть несколько вариантов.Можно было бы использовать @HostBinding, и это все, что вам нужно для этого: 

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